Сервисы подбора цвета для веб-дизайна

Системы цветов RGB, CMYK, HSL

В различных случаях в зависимости от того, как воспроизводится цвет, используются различные цветовые системы. Если мы используем источники света — доминирующей системой является RGB (от «red/green/blue» — «красный/зелёный/синий»).


Для цветов, которые получаются путём смешивания красок, пигментов или чернил на ткани, бумаге, полотне или другом материале, в качестве цветовой модели используется система CMY (от «cyan/magenta/yellow» — «циан/фуксин/жёлтый»). В связи с тем, что чистые пигменты очень дороги, для получения чёрного цвета используется не равная смесь CMY, а просто чёрная краска.

Другой популярной цветовой системой является HSL (от «hue/saturation/lightness» — «цвет/насыщенность/яркость»). У этой системы есть несколько вариантов, где вместо насыщенности используется хроматичность (chroma), светлота (luminance) вместе с яркостью (value) (HSV/HLV). Именно эта система соответствует тому, как человеческий глаз видит цвет.

Сохранение, восстановление расположения палитр

Расположение палитр в программе называется Workspace (Рабочая среда). Разработчиками предусмотрены различные наборы палитр для разнообразия задач. Напри- мер, Essentials (Default) (Основная рабочая среда (по умолчанию)) имеет необходимый набор палитр. Подберите наиболее удобное с вашей точки зрения расположение палитр, убрав ненужные с экрана. Сохраните полученную рабочую область под подходящим названием командой меню Window | Workspace | New Workspace (Окно | Рабочая среда | Новая рабочая среда).

Вы в любой момент можете получить данное расположение палитр, выбрав название вверху списка в меню Window | Workspace (Окно | Рабочая среда). Если вы желаете восстановить расположение палитр, выполните команду Window |Workspace | Essentials (Default) (Окно | Рабочая среда | Основная рабочая среда (по умолчанию)) или другую, подходящую для вашей работы.

Тон (Hue)

Иные переводы: цвет, краска, оттенок, тон.

Именно это слово мы имеем в виду, когда задаём вопрос «Какой это цвет?». Мы интересуемся свойством цвета, которое называется «Тон/Hue». Например, когда мы говорим о красном, жёлтом, зелёном, и синем цветах, мы имеем в виду «тон/hue». Различные тона создаются светом с различной длиной волны. Таким образом, этот аспект цвета обычно довольно легко распознать.

Контраст тонов — явно различные тона.

Контраст тона — различные оттенки, одинаковый тон (синий).

Термин «тон» описывает главную характеристику цвета, которая отличает красный цвет от жёлтого и синего. Цвет в значительной степени зависит от длины волны света излучаемого или отражаемого объектом. Например, диапазон видимого света находится между инфракрасным (длина волны ~700nm) и ультрафиолетовым (длина волны ~400nm).

На диаграмме показан цветовой спектр, отражающий эти границы видимого света, а также две цветовые группы (красная и синяя), которые называются «семействами тонов». Любой цвет, взятый из спектра можно смешать с белым, чёрным и серым, и получить цвета соответствующего семейства тонов

Обратите внимание, что в семействе тонов присутствуют цвета с различной яркостью, хроматичностью и насыщенностью

Система CMYK

Бумага является изначально белой. Это означает, что она обладает способностью отражать весь спектр цветов света, который на неё попадает. Чем качественнее бумага, чем лучше она отражает все цвета, тем она нам кажется белее. Чем хуже бумага, чем больше в ней примесей и меньше белил, тем хуже она отражает цвета, и мы считаем её серой. Сравните качество бумаги журнала «Плейбой» и газеты «Конотопский вестник», и почувствуйте разницу.

Противоположный пример — асфальт. Только что положенный хороший асфальт (без примесей гальки) — идеально чёрный. То есть на самом деле цвет его нам не известен, но он таков, что поглощает все цвета света, который на него падает и потому он нам кажется чёрным. Со временем, когда по асфальту начинают ходить пешеходы или ездить машины, он становится «грязным» — то есть на его поверхность попадают вещества, которые начинают отражать видимый свет (песок, пыль, галька). Асфальт перестаёт быть чёрным и становится «серым». Если бы нам удалось «отмыть» асфальт от грязи — он снова стал бы чёрным.

Красители представляют собой вещества, которые поглощают определённый цвет. Если краситель поглощает все цвета кроме красного, то при солнечном свете, мы увидим «красный» краситель и будем считать его «красной краской». Если мы посмотрим на это краситель при свете синей лампы, он станет чёрным, и мы ошибочно примем его за «чёрную краску».

Путём нанесения на белую бумагу различных красителей, мы уменьшаем количество цветов, которые она отражает. Покрасив бумагу определённой краской мы можем сделать так, что все цвета падающего света будут поглощаться красителем, кроме одного — синего. И тогда бумага нам будет казаться выкрашенной в синий цвет. И так далее.

Соответственно, существуют комбинации цветов, смешивая которые мы можем полностью поглотить все цвета, отражаемые бумагой, и сделать её чёрной. Опытным путём была выведена комбинация «циан-маджента-жёлтый» (CMY) — cyan/magenta/yellow.

В идеале, смешивая эти цвета, мы должны были бы получить чёрный цвет. Однако на практике так не получается из-за технических качеств красителя. В лучшем случае, что мы можем получить, — это темно-бурый цвет, который лишь отдалённо напоминает чёрный. Более того весьма неразумно было бы использовать все три дорогие краски только для того, чтобы получить элементарный чёрный цвет. Поэтому в тех местах, где нужен чёрный, вместо комбинации трёх красок наносится обычный более дешёвый чёрный краситель. И потому к комбинации CMY обычно добавляется буква K (Key — «ключевой», или blacK) — обозначающая чёрный цвет.

Белый цвет в схеме отсутствует, так как его мы и так имеем — это цвет бумаги. В тех местах, где нужен белый цвет, краска просто не наносится. Значит отсутствие цвета в схеме CMYK соответствует белому цвету.

Эта система цветов называется субтрактивной (subtractive), что в грубом переводе означает «вычитающая/исключающая». Иными словами, мы берём белый цвет (присутствие всех цветов) и, нанося и смешивая краски, удаляем из белого определённые цвета вплоть до полного удаления всех цветов — то есть получаем чёрный.

Качество изображения на бумаге зависит от многих факторов: качества бумаги (насколько она бела), качества красителей (насколько они чисты), качества полиграфической машины (насколько точно и мелко она наносит краски), качества разделения цветов (насколько точно сложное сочетание цветов разложено на три цвета), качества освещения (насколько полон спектр цветов в источнике света — если он искусственный).

Чтобы подобрать цветовую схему с помощью цветового круга, воспользуйтесь следующей инструкцией:

Шаг 1 Выберите главный цвет.


Каждый проект, в том числе рисунок, с чего-то начинается. Если есть какое-то изображение, которое хочется чем-то дополнить, то внимательно посмотрите на него. Преобладающий цвет можно взять в качестве главного. Если исходного материала нет, то мысленно создайте картину. Это поможет определить главный цвет, от которого будет строиться весь рисунок.

Шаг 2 Найдите главный цвет на цветовом круге.

Если у вас есть цветовой круг, то найти на нем главный цвет можно, просто взглянув на круг.

Шаг 3

С помощью одной из представленных схем найдите другие цвета, сочетающиеся с основным цветом.

Если, например, вы выберете соседние цвета от главного цвета, то можете быть спокойными насчет их сочетаемости. Это аналоговая схема. Вместе такие цвета будут смотреться гармонично.

Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!

Переход из одной системы в другую

Главная трудность при переходе из системы RGB в CMYK заключается в том, что на бумаге (в системе CMYK) не могут быть представлены некоторые цвета, которые с лёгкостью можно представить на экране. Если на экране запросто можно сделать оттенок цвета с точностью до бита (#CF8E12), то в смешивании красителей (при их неидеальном качестве) такой точности добиться просто невозможно. Поэтому часто то, что на экране выглядит ошеломляюще, на бумаге выглядит блекло и некрасиво.

Потому-то так много труда тратится при переводе картинки, сделанной художником на компьютере, в вид, который достойно будет выглядеть при печати. В некоторых программах можно заранее переключиться в режим CMYK и создавать изображение в этой схеме. Тогда при попытке выбрать невоспроизводимый цвет программа выдаст сообщение типа такого:

Если вы создаёте изображение только для просмотра на экране (то, что мы имеем в случае Web-дизайна), и которое не планируется представлять в цвете на бумаге, забудьте о схеме CMYK, работайте в схеме RGB и не морочьте себе голову.

Photoshop — программа изначально предназначенная для полиграфии — обработки изображений и подготовки их для печати. Потому она укомплектована полным набором средств: от CMYK схемы до подпрограммы разделения цветов. Для Web-дизайнера эти функции Photoshop-а — мёртвый груз

Поэтому, несмотря на все достоинства и мощь Photoshop-а, стоит обратить внимание и на другие графические программы, которые специально заточены для создания «экранных» изображений или конкретно под Web. Они легче, так как не несут лишних полиграфических функций, либо вместо них укомплектованы дополнительными вкусностями, облегчающими жизнь Web-мастеру/Web-дизайнеру

Схема цветового круга

Главным принципом цветовой коррекции является настройка баланса цветов, в основе которого лежит цветовой круг, показывающий взаимосвязь основных цветов двух моделей — RGB и CMYK (рис. 4).

Рис. 4. Схема цветового круга

Для цветовой коррекции используйте следующие три правила, вытекающие из этой схемы:

1. Уменьшение содержания одного цвета увеличивает содержание противоположного и наоборот. Противоположными называются цвета, которые соединяются линией, проходящей через центр круга. Например, увеличивая содержание красного цвета, мы уменьшаем содержание голубого, и наоборот.

2. Содержание определенного цвета можно изменить за счет влияния на соседние цвета и наоборот. Например, для увеличения красного цвета можно повысить содержание желтого и пурпурного и наоборот.

3. Чтобы увеличить содержание определенного цвета, необходимо уменьшить содержание цветов, соседних с противоположным, и наоборот. Например, для увеличения красного цвета следует уменьшить содержание зеленого и синего.

На рис. 3 мы определили цель коррекции — уменьшение содержания красного цвета. Исходя из перечисленных правил, следует действовать так:

  • по правилу 1 нужно увеличить содержание противоположного голубого цвета;
  • по правилу 2 следует уменьшить содержание соседних желтого и пурпурного цветов;
  • по правилу 3 необходимо увеличить содержание соседних с противоположным зеленого и синего цветов.

Когда определена цель коррекции и ясны действия для ее достижения, необходимо выбрать нужный инструмент. Также в ходе коррекции лучше попробовать удалить сдвиг по двум­трем правилам, чтобы была возможность, сравнив полученные результаты, выбрать наилучший.

Итак, всё вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придётся кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведённые здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь в конечном счёте решающим фактором будет читаемость текста на веб-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.


Рис. G.: не всякая комбинация годится в дело

Выбор и скрытие палитры

Полный список всех палитр находится в меню Window (Окно). Активные палитры,находящиеся впереди в своих группах, отмечены галочками рядом со своим названием. Чтобы открыть или закрыть палитру, установите или сбросьте галочку. Если же палитра видна на экране, но находится на заднем плане, активизируйте ее щелчком по вкладке с названием. При этом палитра выходит на передний план в своей группе. Если палитры перекрыли изображение, нажмите клавишу <Tab>, чтобы их скрыть. Нажмите клавишу <Tab> еще раз, чтобы отобразить все палитры. Для того чтобы скрыть палитры, но при этом оставить видимой панель инструмен- тов, воспользуйтесь комбинацией клавиш <Shift>+<Tab>.

Гистограмма изображения, разобранная по цветовым каналам

Напомню, что палитра  Гистограмма (Histogram) вызывается с помощью команды Окно (Window) -> Гистограмма (Histogram). Чтобы разложить график по цветам, необходимо из дополнительного меню палитры, которое раскрывается щелчком по кнопке , выбрать пункт Просмотр всех каналов (All Channels View). А для отображения цветных графиков следует выбрать пункт Показать каналы в цвете (Show Channels in Color) — рис. 1.

Рис. 1. Гистограмма изображения, разобранная по цветовым каналам

Рис. 2. Все цветовые каналы представлены в одной системе координат

Гистограмма, представленная на рис. 1, показывает, что в изображении преобладает красный цвет: график красного канала смещен относительно остальных в сторону светов. Для удобства сопоставления всех каналов их можно показать в одной системе координат (рис. 2). Для этого необходимо из списка Канал (Channel) выбрать пункт Цвета (Colors).

Примечание. Цветовой канал — это полутоновое изображение, отражающее распределение яркостей соответствующего базового цвета. Изображение, представленное в модели RGB, имеет три цветовых канала: красный, зеленый и синий. Полутоновые изображения в красном, зеленом и синем каналах накладываются друг на друга, образуя цветную картинку. Этот результат принято называть совмещенным RGB­каналом.

Теория цвета

Как правило, дизайнеры используют определенный набор цветов (от трех до пяти, не считая белый и черный). Сначала выбирается основной цвет, а затем те, что будут обрамлять его. Выбор цветов – это целая наука, так как каждый из них по-своему влияет на человека и не все они хорошо сочетаются между собой.

Совет

Если вы хотите прибавить заряд бодрости, подтолкнуть человека к активным действиям добавьте немного красного цвета, а если нужен противоположный эффект, то стоит присмотреться к оттенкам синего.

Группа цветов, которые используются в проекте или при создании изображения называется цветовой схемой или палитрой цветов.

Лучшим помощником в подборе сочетающихся цветов является цветовой круг Иттена. Он основан на трех первичных цветах (желтом, синим и красном), из которых шаг за шагом могут быть получены все остальные. Если в равном соотношении смешать желтый и синий, то выйдет зеленый цвет. Чтобы получить оранжевый, нужно объединить красный с желтым, а для создания фиолетового – красный с синим. Три получившихся цвета – зеленый, оранжевый и фиолетовый – называются вторичными. От них тоже есть производные, которые, в свою очередь, считаются третичными цветами или цветами третьего порядка. В общей сложности круг поделен на 12 цветовых секторов.

Но в цветовом круге Иттена нет оттенков основных цветов. Поэтому, при помощи ахроматических цветов — черного и белого, круг, без изменения числа секторов, был дополнен множеством оттенков.

Подбор гармонично сочетающихся цветов может стать утомляющим занятием, но только не для тех, кто умеет работать с цветовым кругом. А также понимает, что такое цветовой тон, яркость и насыщенность. С помощью этих трех параметров можно задать все воспринимаемые человеческим глазом цвета.

Цветовой тон

Это свойство зрительного ощущения человека, определяет название цвета: оранжевый, фиолетовый, синий. В данном контексте словосочетание «цветовой тон» можно считать синонимом слову «цвет».

Насыщенность

Насыщенность описывает интенсивность цвета. Цветовой тон высокой насыщенности дает яркий, интенсивный цвет. Менее насыщенный цветовой тон выглядит бледнее. Для легкости понимания слово «насыщенность» можно мысленно заменить на «красочность».

Яркость

Данный параметр определяет насколько цвет темный или светлый. Обычно измеряется в процентах. Яркость можно представить, как количество света, падающего на объект — от белого до черного, то есть от стопроцентной яркости до нулевой. Если на что-то направить яркий свет, например на аппетитную и зрелую клубнику, то она будет казаться практически белой. И, наоборот, черной, если на неё не будет попадать свет.

Использование диалогового окна Цветовой баланс

Диалоговое окно Цветовой баланс (Color Balance) позволяет проводить коррекцию цвета в различных тоновых диапазонах изображения независимо друг от друга. Области влияния инструмента задаются тремя переключателями: Тени (Shadows), Средние тона (Midtones) и Света (Highlights). Коррекция проводится путем смещения ползунка в сторону одного из пары противоположных цветов цветового круга: голубого или красного, пурпурного или зеленого, желтого или синего (рис. 9).

Рис. 9. Диалоговое окно Цветовой баланс


Данное диалоговое окно вызывается командой Изображение (Image) -> Коррекция (Adjustments) -> Цветовой баланс (Color Balance) или клавиатурным эквивалентом Ctrl+B (в Mac OS — Command+B).

Используя диалоговое окно Цветовой баланс (Color Balance), сбалансируем по цветам изображение Казанского собора, представленное на рис. 10.

Рис. 10. Исходное изображение Казанского собора с нанесенными на него цветовыми метками

1. Установим две пробы: первую в области основания купола, вторую в тени между колоннами. Обе пробы соответствуют серому цвету, только первая светлее второй. Обе показывают на избыток синего цвета: R = 168, G = 169, B = 190 (первая проба) и R = 19, G = 19, B = 45 (вторая проба).

2. По правилу 1 цветового круга для уменьшения содержания синего цвета следует увеличить содержание противоположного ему желтого цвета.

3. В окне Цветовой баланс (Color Balance) установим флажок Средние тона (Midtones) и переместим ползунок в сторону желтого цвета. Аналогично скорректируем цвет, предварительно установив флажок Света (Highlights), а затем Тени (Shadows).

4. В ходе коррекции мы получили приблизительно равное соотношение между составляющими в обеих цветовых пробах: R = 188, G = 188, B = 189 (первая проба) и R = 26, G = 26, B = 26 (вторая проба) — рис. 11.

Рис. 11. Результат коррекции в окне Цветовой баланс и показания цветовых проб

Подбор цветов с помощью цветового круга

Самый простой способ подбора цветов в цветовом круге — представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами — потенциальные кандидаты на использование. (Для тех, кто проспал урок геометрии и черчения, поясняю, вершинами являются точки, где сходятся отрезки, образующие стороны треугольника). Этот тип подбора цветов называется «триадной схемой». Взгляните на рис. С. У нас получаются четыре различных триадных схемы, с которыми уже можно работать. Суть заключается в том, что эти цвета, работая вместе образуют гармоничную комбинацию цветов.

Рис. С: На цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплементарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга — например, красный и зелёный. Они называются комплементарными/дополняющими потому, что будучи помещёнными рядом, они делают друг друга ярче и живее, см. рис. D.

Рис. D.: цвета, противоположные друг другу на круге называются комплементарными/дополняющими

Примечание: от латинского «Complementum» — термин переводится как «дополняющий/дополнительный», в более современной литературе как «комплИментарный», и как «комплЕментарный» в равных пропорциях. Последний вариант мы считаем правильным.

Использование диалогового окна Кривые

Используя диалоговое окно Кривые (Curves), удалим цветовой сдвиг на изображении Михайловского замка.

1. Установим две метки на изображениях облака и серой стенки (рис. 7). Облако должно быть белого цвета, а мы имеем заниженное содержание в зеленой и красной составляющих: R = 190, G = 189, B = 255. Вторая проба должна иметь равные значения всех трех базовых цветов, а на самом деле наблюдается преобладание синего цвета: R = 135, G = 137, B = 180. Цель коррекции — уменьшить содержание синего цвета.

2. По правилу 3 цветового круга необходимо увеличить содержание красного и зеленого цветов. Для этого следует в соответствующих каналах коррекционную прямую преобразовать в выпуклую кривую.

Рис. 7. Исходное изображение Михайловского замка с нанесенными на него цветовыми метками

Рис. 8. Результат коррекции в окне Кривые и показания цветовых проб

3. В результате коррекции мы имеем следующие показания проб. Первая проба: R = 239, G = 237, B = 255. Вторая проба: R = 179, G = 177, B = 180 (рис. 8). Первая проба указывает на небольшое преобладание синего цвета, что вполне нормально для цвета облака. Вторая проба имеет почти равные значения всех трех составляющих. Так что результат коррекции можно считать удовлетворительным.


С этим читают