Что такое палитра изображения
Палитра цвета
Содержание
Основные виды цветовых палитр
Существуют три основные палитры цветов :
2. Более современная и быстрорастущая NCS (англ. Natural Color System, естественная система цвета). Эта цветовая модель была предложенная Скандинавским институтом цвета (Skandinaviska Färginstitutet AB), Стокгольм, Швеция в 1979 году. Она основана на системе противоположных цветов и нашла широкое применение в промышленности для описания цвета продукции. При описании цвета по NCS используются шесть простых цветов: белый, чёрный, красный, жёлтый, зелёный и голубой (то есть таких, которые нельзя описать сочетанием двух других). Все остальные цвета представлены сочетанием основных (например, оранжевый — одновременно красноватый и желтоватый). Это облегчает интуитивное понимание цвета из его кодированной записи, в то время как в таких системах как RGB мысленная визуализация цвета по трём цифрам довольно сложна. В описании цвета учитывается близость к черному — темнота цвета, чистота цвета (насыщенность) и процентное соотношение между двумя основными цветами. Полная запись цвета может также включать кодовую букву, обозначающую версию стандарта NCS. Например, цвета шведского флага в системе NCS определяются следующим образом: Для определения цвета по системе NCS издаются каталоги и программное обеспечение. Последняя редакция цветового веера содержит 1950 цветов.
3. Pantone. Используется в основном в полиграфии. Разработанная американской фирмой Pantone Inc в середине XX века. Использует цифровую идентификацию цветов изображения для полиграфии печати как смесевыми, так и триадными красками. Эталонные пронумерованные цвета напечатаны в специальной книге, страницы которой веерообразно раскладываются. Существует множество каталогов образцов цветов Pantone, каждый из которых рассчитан на определённые условия печати. Например, для печати на мелованной, немелованной бумаге, каталог для металлизированных красок (золотая, серебряная) и т. д. Производитель настаивает на том, что «веера» необходимо ежегодно заменять, так как за это время процесс выцветания и истирания изображения делает цвета неточными.
Цветовые палитры в компьютерной графике
Зачем нужны цветовые палитры и как ими пользоваться?
Многие рукодельницы знают, что выбрать подходящие цвета для изделия бывает неимоверно сложно. Но есть доступный способ грамотно подобрать цвета для работы и не испытать необоснованных мук творчества.
В этой статье я расскажу о подборе цветовой палитры, раскрою секреты и поделюсь своим опытом
Есть несколько правил для правильного подбора цвета.
Правило 1. Ограничьте количество цветов.
При выборе цвета очень важно соблюдать баланс. При большом количестве используемых цветов баланса достичь почти невозможно. Поэтому существует основное правило «Трех основных цветов», где вам нужно выбрать только 2-3 цвета из палитры, а все дополнительные цвета должны быть их оттенками.
Как построить цветовую схему:
В этом поможет цветовой круг из 12 цветов — это один из главных инструментов для создания цветовых схем.
Стандартные цветовые схемы
Есть несколько принципов подбора цветовых схем, которые будут полезны:
Монохромная (одноцветная) схема. Это самая простая цветовая схема, в которой используются различные оттенки одного цвета. Все оттенки цвета хорошо сочетаются друг с другом и создают успокаивающий эффект. Такие схемы очень хорошо воспринимаются глазом, выглядят элегантно.
Аналоговая схема. В такой палитре используются родственные цвета, то есть те, которые на цветовом круге расположены рядом. Здесь выбирается один доминирующий цвет, а два других дополняют его. Хитрость этой схемы в том, что в цветах варьируется насыщенность, создавая необходимую зрительную нагрузку – можно сделать очень яркое сочетание либо наоборот, использовать оттенки, которые вызовут умиротворение.
Комплементарная схема. Контрастная схема, в которой использованы два противоположных цвета. Эта схема применяется для акцентирования деталей и привлечения внимания. Например, среди зелени яркое красное пятно будет несомненно заметным и сразу притянет все взгляды.
Также существуют кастомизированные палитры или выборочные. Создать такую палитру очень просто – возьмите нейтральную гамму (черно-белая, оттенки черного) и добавьте в нее любой яркий акцент. Такая палитра будет выглядеть свежо и очень эффектно.
Правило 2. Вдохновляйтесь природой.
Самые гармоничные цветовые схемы дарит нам Природа. Это те самые сочетания цветов, которые хорошо воспринимаются человеческим глазом и которые Природа математически точно создала для нас.
Если вы видите красивую «картинку» — сфотографируйте ее и сделайте новую потрясающую цветовую палитру для работы.
Кроме этого можно черпать вдохновение из палитр дизайнеров, например, DesignSeeds регулярно выкладывают в своем блоге невероятные палитры с указанием цветов и вы можете легко подобрать подходящие цвета для нового пледа или открытки.
Правило 3. 60-30-10
Это правило любого дизайнера — пропорция 60% + 30% + 10% поможет гармонично «раскрасить» любое пространство. Эта концепция невероятно проста в использовании: 60% — ваш доминирующий оттенок, 30% — вторичный цвет и 10% — цвет акцента. Идея заключается в том, что вторичный цвет поддерживает основной цвет, но отличается от него насыщенностью. А 10% акцента — это то самое яркое пятно, о котором часто любят говорить дизайнеры Такое соотношение позволяет глазу комфортно перемещаться от одной фокусной точки к другой.
Правило 4. Начинайте с черно-белой гаммы
Когда начинаешь новый проект, так и тянет «поиграть с цветом». Мало того, зачастую именно яркий цвет и становится источником вдохновения (вспомните, как вы стоите перед рядами разноцветной бумаги в магазине и взгляд притягивает какой-то умопомрачительного цвета лист — вы уже видите прекрасную открытку?
Как бы ни было сильно искушение, мы советуем не спешить. Сделайте сначала прототип будущей открытки в оттенках серого (или в других монохромных тонах). Вы увидите общую «картинку» и внедрить в нее другой цвет будет потом несложно.
Правило 5. Не используйте черный цвет.
При подборе цвета для своего проекта никогда не используйте чистый черный цвет. Черный — цвет неестественный, и при размещении его с другими цветами, черный их «задавит». Здесь как раз пригодится Правило 2 — понаблюдайте, ведь в реальности, в природе вы никогда не найдете чистый черный цвет, вам будут встречаться лишь его оттенки.
Правило 6. Используйте цвет для получения эмоций
Творческие люди, как никто другой знают, что цвет может вызывать эмоции и влиять на настроение людей. Поэтому очень важно в вашей работе использовать благоприятные для восприятия цвета. Цвет может как помочь вашему изделию выглядеть выгоднее, так и легко «перечеркнет» всю ценность вашей работы.
Величайший колорист XX века Пьер Боннар сказал: «Цвет не добавляет приятного к дизайну — он его усиливает».
С правилами всё понятно, а как же эти палитры создаются? Инструментов имеется очень много, я хочу рассмотреть некоторые из них, которыми пользуюсь сама.
Необходимые инструменты для создания цветовых палитр
Adobe Color CC — отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет на палитре может быть индивидуально изменен, или выбран в качестве базового цвета, с помощью нескольких простых щелчков мыши. Палитры могут быть сохранены и добавлены в библиотеку, и есть ряд готовых цветовых схем, доступных на сайте.
Можно также загрузить свое изображение и «разложить» его на палитры разной яркости и насыщенности.
ColorScheme — похожий инструмент, который позволяет делать более тонкую настройку палитры.
Здесь не получится загрузить свое изображение, но зато можно выбрать цветовую модель (например, смотреть палитру в цветах Pantone, выбрать симуляцию нарушений зрения, и даже найти соответствие цвета ниток мулине в зависимости от производителя!)
Material Design — крутой гайдлайн по подбору цвета. Кроме описания основ подбора и всех необходимых правил можно найти коллекцию цветов, гармонирующих друг с другом.
Coolors — это мощный инструмент для создания цветовых схем. Вы можете просто заблокировать выбранный цвет и нажать пробел, чтобы создать новую палитру. Самое классное в этом инструменте то, что вы не ограничены только одним результатом — можно получить несколько цветовых схем, просто изменив контрольную точку.
Можно загрузить свою фотографию и сделать прекрасную палитру:
И теперь самое интересное) Создали мы палитру, получили цвета, а как же применять их на практике, для подбора цвета пряжи или краски?
Как пользоваться номерами цветов в палитрах?
Это, пожалуй, главный вопрос А ответ будет очень простым.
Во всех цветовых палитрах цвет указывается в виде RGB-цветов, их еще называют WEB-цвета. Обозначаются они обычно комбинацией букв латинского алфавита и цифр, впереди ставится «решетка»:
Из номера такого цвета можно получить аналог в RGB, CMYK или Pantone, а затем подбирать похожие цвета у производителя товаров.
Как это работает
Например, у нас есть прекрасная цветовая палитра от DesignSeeds, где указаны следующие коды цветов:
Нам нужен зеленый, его код в палитре 597B67. В фотошопе переходим в настройки цвета и копируем номер цвета в нужное поле:
Мы видим аналог этого цвета в палитрах RGB (89-123-103) и CMYK (73-47-71-4).
Также можно воспользоваться одним из вышеописанных инструментов. Например, идем на ColorScheme и выбираем раскладку цвета в палитре Pantone — получаем коды цветов в RGB, CMYK и Pantone.
Дальше потребуются данные от производителя. Производители бумаги могут запросить коды CMYK или Pantone и точно подберут цвет бумаги. Для определения цвета краски понадобится Pantone. По ниткам мулине есть в сети довольно обширные справочники по цветам например:
Можно найти подходящий цвет и потом воспользоваться таблицей перевода цветов ниток мулине из одной марки в другую.
Некоторые производители указывают соответствие цвета товара основным цветовым схемам.
Воспользовавшись этими советами вы можете создать собственную цветовую палитру очень легко и успешно использовать ее для создания своих изумительных работ!
А вот пример сочетания цвета в готовом изделии согласно цветовой палитре:
Цветовые пространства: большой разбор
Всё, что нужно знать о CMYK, RGB, HSL, HSB, LAB и чистых градиентах.
Для работы с цветом необходимо хорошо понимать, как он устроен. Есть системы представления цвета, с которыми дизайнер сталкивается каждый день. Но есть и другие, не столь популярные модели. Разберёмся, как они устроены, чем отличаются и как эти знания можно применить на практике.
Ведущий интерфейсный дизайнер в K&K TEAM, увлечён дизайном, технологиями и людьми. В свободное время ведёт Telegram-канал «Karoza Ҩ»
Воспроизводимые представления цвета
Цветовые модели RGB и CMYK соответствуют физическому представлению цвета на носителе. RGB отвечает за то, с какой интенсивностью светятся диоды красного, зелёного и синего цветов внутри пикселя монитора. CMYK задает пропорции смешиваемой краски на листе бумаги.
Цветовое пространство CMYK — субтрактивное: если сложить все цветовые компоненты, то итоговый цвет будет чёрным. По этому же принципу работают обычные краски, а потому пространство CMYK используется в полиграфии. Через процентные соотношения в нём записаны пропорции смешения четырёх красок: бирюзовой ( Cian), пурпурной ( Magenta), жёлтой ( Yellow) и чёрной ( Key color, blac K). Интенсивность каждого цвета задаётся в процентах от 0 до 100.
Дизайнеры, работающие с печатью, знают, что не все видимые на экране цвета возможно воспроизвести в CMYK. Связано это с тем, что модель RGB ― с ней работает монитор ― построена на излучении света, а CMYK ― на поглощении.
Для более точного отображения цветов при печати требуется допечатная подготовка. Во время неё экранные цвета пространства RGB переводятся в CMYK, чтобы получаемые оттенки на экране и бумаге были максимально приближены друг к другу.
Pantone — американская компания, основанная в 50-е годы в Нью-Йорке и занимающаяся производством пигментов и продажей чернил. Компания разработала систему стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код.
Поскольку не все цвета можно воспроизвести в CMYK наложением четырёх стандартных красок во время печати, в полиграфии существует дополнительная палитра Pantone. Например, серый и жёлтый, которые Pantone выбрала в качестве цветов 2021 года, получить наложением палитры CMYK на листе невозможно.
Выбор цветов Pantone шире, потому что его на бумагу наносят одной краской, тон которой получен смешением пигментов ещё на фабрике. Также цвета Pantone используют при печати больших тиражей в один-три цвета.
PMS — Pantone Matching System — система подбора цвета, но не цветовое пространство, так как у цветов есть код, но нет значений цветовых координат.
CMYK используется в полиграфии для печати фотографий и цветных иллюстраций, небольших тиражей, а также в домашних и офисных принтерах.
RGB ― это цветовое пространство, здесь каждый цвет задаётся в виде трёх координат. Смешение цвета происходит по аддитивному принципу ― если сложить все три основных цвета, то результат будет не чёрным, а белым. Поэтому RGB используется в системах, построенных на излучении света, что делает её самой распространённой ― с ней работают все экраны.
Цветовой оттенок в RGB создаётся смешиванием красного ( Red), зелёного ( Green) и синего ( Blue) каналов с разной интенсивностью излучения. Яркость каждого из трёх основных цветов закодирована числом от 0 до 255, то есть занимает 256 бит или 32 байта.
Например, RGB (90, 0, 157) соответствует фиолетовому, а RGB (255, 223, 0) — жёлтому.
Для удобства записи придуманы HEX-коды обозначения цветов, в которых интенсивность каждого из трёх цветов задаётся через двузначное число в шестнадцатеричной системе, что даёт те же 256 комбинаций или 32 байта, ведь
16 × 16 = 256.
В шестнадцатеричной системе цифры обозначаются от 0 до F, в результате
HEX-коды выглядят вот так: #5A009D — фиолетовый, #FFDF00 — жёлтый. Преимущество такой записи ― стандартизация и удобство копирования короткого цветового значения.
Иногда HEX-код в CSS или графических редакторах содержит только три знака, в таком случае каждый второй символ в записи с овпадает с первым. То есть #F45 интерпретируется как #FF4455, #000 — #00000.
Поскольку с цветовым пространством RGB работают все экраны, то применяется оно практически везде ― от разработки макетов для печати (цвета переводятся в CMYK в самом финале) до разработки сайтов и интерфейсов.
Свойства цвета
Перед тем как перейти к следующему разделу, нужно разобраться в некоторых определениях колористики — науки, изучающей свойства цвета.
Важные понятия
Цветовой тон (Hue) — положение цвета в видимом спектре. Человеческий глаз различает цвета от красного до фиолетового, цветовой тон ― это место цвета в спектре. Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый — всё это цветовые тона.
Насыщенность (Saturation) — интенсивность цвета, красочность, степень отличия цвета от равного по светлоте серого. Чем ближе цвет к серому, тем он менее насыщенный.
Яркость (Brightness) — приближённость цвета к чёрному. Чем ниже яркость, тем цвет темнее. Нередко яркость путают с насыщенностью, но это разные характеристики.
Цилиндрические цветовые пространства
Модель RGB технически подходит для компьютеров и экранов, но в этом пространстве сложно работать, если нужно изменить что-то одно ― яркость, насыщенность или цветовой тон.
Допустим, мы используем синий цвет RGB (63, 42, 255), но для второго макета нам нужен более тёмный синий того же тона или же зелёный той же яркости и насыщенности. При изменении одной характеристики изменились сразу три параметра: синий теперь имеет значения RGB (18, 12, 77), а зелёный —
RGB (67, 255, 42).
Поэтому в программах для дизайнеров цветовой тон настраивается полоской, а яркость и насыщенность ― через цветовое поле.
Координаты цвета существуют в кубической системе RGB, но в графических редакторах управление цветом реализовано с использованием другой модели ― цилиндрической версии RGB, которая называется HSB или HSV.
В HSB цветовой тон ( Hue) задаётся в градусах на цветовом круге от 0° до 360°, а насыщенность ( Saturation) и яркость ( Brightness) в процентах от 0% до 100%.
Чтобы получить в HSB чёрный, надо уменьшить яркость до 0%, а тон и насыщенность не важны. Для получения белого нужно понизить насыщенность до 0% — то есть приблизить цвет к серому, а яркость повысить до 100%. Для получения чистых цветов яркость и насыщенность должны быть 100%.
Иногда цветовое пространство HSB называют HSV ( H ue — цветовой тон, S aturation — насыщенность, V alue — значение). Не стоит путаться — это альтернативное название, а не другое цветовое пространство.
В CSS помимо HEX-кодов RGB применяют цилиндрическое цветовое пространство HSL, где вместо яркости ( Вrightness) используется светлота ( Lightness). HSB и HSL очень похожи, но не идентичны.
Главное отличие HSL в том, что при любых значениях тона и насыщенности светлота в 0% даст чёрный, а светлота в 100% — белый. В HSB 100% последнего параметра ― яркости — даёт наиболее яркий цвет, а белый возможен, только если насыщенность равна нулю.
То есть светлота в HSL отвечает за примесь чёрного или белого, освещённость. При конвертации цвета из системы HSL в HSB изменение параметра L будет влиять на два параметра сразу — S и B, неизменным сохранится только цветовой тон — H.
Цилиндрические цветовые пространства полезны в ситуациях, когда нужно управлять только одним из параметров цвета. Например, для создания палитры, где изменение основного цвета приводит к изменению цветового тона, насыщенности или светлоте дополнительных. В этом случае дополнительные цвета необходимо задавать через отклонения от основного в цилиндрической цветовой системе.
В новой философии дизайна Material You компании Google цвета интерфейса подстраиваются под цвет обоев рабочего стола. Вполне возможно, что для такой автоматической подстройки применяют алгоритмы, использующие цилиндрическое цветовое пространство.
Дано: пользователи двух статусов.
Задача: автоматически создавать аватары пользователям с учётом их статуса. У одних пользователей должны быть светлые буквы на тёмном фоне, а у других — тёмные буквы на светлом.
Для изменения цветового тона необходимо изменить параметр Hue, а остальные параметры сохранить. Для светлого фона используем значения HSL: [0–360°], 100%, 78%, а для тёмного — HSL: [0–360°], 100%, 30%.
В результате цветовой тон аватарок генерируется автоматически с заданной светлотой, а буквы на них хорошо читаются.
LAB и LCh
Одна из проблем пространств RGB и CMYK состоит в том, что это просто
набор значений, которыми должно оперировать устройство вывода ― принтер или экран. Реальное отображение цвета, заданного в RGB и CMYK, зависит от множества факторов. При печати ― от качества краски и печатного оборудования, плотности бумаги, влажности воздуха. На экранах — от качества монитора и его калибровки. Не говоря уже о том, что освещение также влияет на фактическое восприятие цвета глазом.
Создатели CIELAB, также известно как LAB, преследовали цель спроектировать такое цветовое пространство, которое не будет привязано к конкретному устройству и покроет весь видимый спектр. Также было важно, чтобы изменение значений координат было нелинейным и приводило к изменению цвета по логике, близкой к осознанию цвета человеком.
Значения цвета в LAB задаются через светлоту ( Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность.
A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.
Параметр L варьируется от 0 до 100, а параметры A и B в большинстве сервисов для работы с LAB имеют значения от −128 до 128, поскольку координаты A и B обозначают не просто интенсивность какого-то цвета, а спектр между двумя цветами.
Система достаточно сложная, но можно попытаться представить её как смешение четырёх цветов — зелёного, красного, синего и жёлтого. На самом насыщенном срезе цветового пространства со светлотой 100 по углам находятся: зелёный — LAB (100, −128, 128), красный — LAB (100, 128, 128), фиолетовый — LAB (100, 128, −128), бирюзовый — LAB (100, −128, −128), а в самом центре белый —
LAB (100, 0, 0). Как и в случае с RGB, настраивать цветовой тон удобнее в цилиндрической версии LAB — LCh.
Цилиндрическая версия LAB называется LCh, вместо прямоугольных в ней используются полярные координаты. Параметр C ( Chroma — хроматическая составляющая, насыщенность) отвечает за длину радиуса и удалённость от центра цветового круга, а h ( Hue) за угол поворота в градусах — то есть цветовой тон.
LAB используют как промежуточное цветовое пространство для конвертирования RGB в CMYK и наоборот, поскольку оно не привязано к конкретному носителю.
В цветокоррекции его применяют, чтобы быстро убрать желтизну или усилить естественные цвета фотографии. Некоторые цветокорректоры предпочитают LAB, если с его помощью внести изменения будет проще, нежели через корректирующие слои.
Также ранее LAB использовали для удаления шума на цифровых фотографиях. Для этого достаточно было размыть цветовые каналы A или B, а поскольку цифровой шум состоит из бледных разноцветных точек, такой подход делал их менее насыщенными.
Отдельное преимущество LAB — возможности для создания чистых градиентов между насыщенными цветами. Красивые градиенты важны не только в проектировании интерфейсов и дизайн-макетов, но и в информационном дизайне.
Задача: создать чистый градиент между насыщенными цветами.
Проблема: из-за технических нюансов RGB между некоторыми насыщенными цветами при построении градиента возникает странный сероватый оттенок.
Пояснение: в кубической визуализации RGB самые насыщенные цвета расположены на углах куба, а центр занят ненасыщенными сероватыми тонами. Если создавать градиент из цветов, которые находятся на противоположных углах или гранях куба, прямая пройдет через ненасыщенную середину. Так произойдёт, например, с градиентами от фиолетового к зелёному или от жёлтого к синему.
Решение: использовать LAB-градиент.
Открываем Lch and Lab colour and gradient picker, выбираем два цвета, между которыми надо сделать переход, и вводим желаемое количество ступеней.
Копируем цвета из колонки Lab и переносим в редактор, делая линейный градиент из выбранного количества шагов.
Если в качестве редактора вы используете Figma, то нужно установить плагин Chromatic Figma, который автоматически исправляет градиенты через LAB. Результат будет немного отличаться от инструмента Дэвида Джонстона.