По мотивам deadsign.ru
Весь ваш компьютер — это набор нулей и единиц, то есть, для него цвет — не более чем биты. Каждый компьютер создаёт абсолютно любой цвет, используя лишь 3 координаты.
Теперь о том, чем так сильно отличаются эти 3 координаты.
Если вы когда-нибудь программировали в HTML и CSS, то, возможно, сталкивались с моделью RGB, где любой цвет создаётся на основе 3 координат: (1) насколько цвет красный ( R ), (2) насколько цвет зелёный ( G ) и насколько цвет синий ( B ). Если у компьютера всё просто, то это не значит, что у человека тоже. И тут в игру вступает HSV (или HSB).
HSV (англ. Hue, Saturation, Value — тон, насыщенность, значение) или HSB (англ. Hue, Saturation, Brightness — тон, насыщенность, яркость) — цветовая модель, в которой координатами цвета являются:
- Hue — цветовой тон, (например, красный, зелёный или сине-голубой). Варьируется в пределах 0—360°, однако иногда приводится к диапазону 0—100 или 0—1.
- Saturation — насыщенность. Варьируется в пределах 0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
- Value (значение цвета) или Brightness — яркость. Также задаётся в пределах 0—100 или 0—1.
HUE, ТОН = «ЦВЕТ РАДУГИ»
Тон — это любая цифра от 0 до 360. Тон измеряется в градусах, как и окружность (потому что в окружности тоже 360°). Помните цветовой круг? Тон — это любое место на нём.
Цветовой круг или тоновый круг
Пока не будем говорить о том, насколько тёмный, светлый, насыщенный или бледный у нас цвет. Пока просто запомните: чтобы найти нужный тон, нужно прикинуть, к какому цвету на цветовом круге он ближе всего.
«А что же делать с чёрным? Белым? Серым?» - попозже мы и это узнаем.
Если вы хотите развить в себе интуитивное понимание HSV, вам нужно держать в уме несколько опорных точек. Для меня это красный, зелёный и синий, так как на цветовом круге они равноудалены:
- Красный — 0°
- Зелёный — 120°
- Синий — 240°
- Красный — также 360°, что абсолютно идентично 0°
И поэтому выбирая, какой подмешать цвет, я могу быстро вбить число и достаточно близко попасть в нужный тон, просто представив расположение этих трёх точек.
SATURATION, НАСЫЩЕННОСТЬ = «КРАСОЧНОСТЬ»
Насыщенность — это любая цифра между 0 и 100. Поэтому, вне зависимости от того, какой тон вы выбрали, 100%-ная насыщенность будет пределом его красочности, а насыщенность в 0% даст его серый вариант (т.е. если цвет светлый, то он станет светло-серым, а если тёмный — то тёмно-серым).
С насыщенностью всё довольно просто. Иногда я думаю, что это просто цвет, в определенном количестве добавленный в серый. Таким образом, 0% — это тускло-серый, а 100% — это самый красочный цвет, который способен отобразить ваш монитор.
VALUE, ЗНАЧЕНИЕ ЦВЕТА = ЯРКОСТЬ
Яркость — это цифра от 0 до 100. Как и насыщенность, её иногда указывают в процентах. Довольно очевидно, что это значит, но не тут-то было.
- при яркости 0%, цвет становится чёрным, вне зависимости от тона и насыщенности.
- при яркости 100%, цвет становится белым только при условии, что насыщенность равна 0%. В противном случае, 100%-ная яркость это всего лишь... очень яркий цвет.
Запутались? Давайте немного переосмыслим. Представьте себе, что яркость — это лампочка накаливания. 0% значит, что лампочка не горит (и в нашей комнате темно, хоть глаз выколи). 100% значит, что лампочка горит на полную мощность. Возможно, 100%-ная насыщенность — это яркий цвет или, если свет и до этого был белым, то при 100%-ной насыщенности он абсолютно белый.
Итак, если быть кратким: мы можем описать любой цвет с помощью трёх координат:
- Тона: определенного цвета на цветовом круге, от 0° до 360°
- Насыщенности: того, как много в нём цвета, от 0% до 100%
- Значения цвета: насколько ярко горит наша «лампочка», от 0% до 100%
ЦВЕТОВЫЕ ВАРИАЦИИ ТОНА
Во-первых, тон — это отличный способ создавать разные вариации цвета. Ведь в диапазоне от 0° до 360° можно остановиться где угодно. Зачем оставлять синий цвет просто «синим», когда можно без особых усилий получить неплохие его вариации, просто немного сдвинувшись вверх или вниз по кругу?
Здесь мы начали с очень стандартного синего, повернувшись сразу на 240°. Но дабы не выбирать самый унылый цвет из всех возможных, мы решили его немного оживить.
Даже сдвиг тона на 30° до 210° даёт крутой эффект. Стало светлее, веселее, и не так строго. Что-то вроде оформления в twitter, однако это лишь первый шаг.
Усиление тона до 240° даёт цвет индиго. Небольшой сдвиг на 20° — и вот уже смотрится совсем по-другому, покруче, и может неплохо сочетаться с неоном или тёмным фоном, так можно придать лёгкую нотку женственности. И так далее, вы поняли.
То же самое с красным. Сложный цвет, стоит только взяться — и уже проблемы. Он супер яркий и супер дерзкий. Однако всё зависит от того, чего мы хотим добиться — ну, допустим, сделать какое-нибудь сообщение об ошибке — тогда можно добавить в красный совсем чуть-чуть розового (опустившись по тону на 10°), и он станет приятнее. А для более сдержанного варианта можно подмешать немного оранжевого.
НАСТРОЙТЕ ВИДИМОСТЬ С ПОМОЩЬЮ НАСЫЩЕННОСТИ
Существует куча техник, связанных с настройкой насыщенности, но возвращаюсь я постоянно только к одной из них — к настройке видимости.
Если в вашем UI есть цвет, который перетягивает на себя всё внимание, то исправить это можно, просто снизив насыщенность.
Например, взгляните на такую вариацию цвета в лого компании Google. Здесь насыщенность синего увеличена до 90%, и, как видите, он тут как бельмо на глазу.
Насыщенность синего 90%
Смотрите, как выпирает этот синий. Если вы не замечаете, попытайтесь расслабить взгляд и смотрите на лого в течение нескольких секунд. Едва ли не сразу на фоне остальных букв проступят «G» и «g».
Насыщенность синего 70%
В нормальной версии лого баланс между разными цветами выдержан гораздо лучше.
Насыщенность используется везде, в том числе для решения конфликта цветов и для обогащения более тёмных оттенков.
Теперь давайте перейдём к одному из самых удивительных фактов об HSV и к тому, что это значит.
ЧЁРНЫЙ ЦВЕТ НЕ ПРОТИВОПОЛОЖЕН БЕЛОМУ
Вот как делается чёрный и белый цвет в HSV:
- Чёрный: снизьте яркость до 0%. Тон и насыщенность могут быть какие угодно.
- Белый: увеличьте яркость до 100%, а насыщенность снизьте до 0%. Тон также может быть каким угодно.
Это значит — удивительно даже — что (в цветовой модели HSV) чёрный не противоположен белому.
Есть ещё один способ понять, как работает эта модель — подумать, что по сути значит добавить в цвет чёрного или белого.
Чтобы добавить в цвет белого, вам нужно сдвинуть его ближе к белому в палитре выбора цвета. Белый находится в левом верхнем углу и, добавив его, вы, само собой разумеется, уменьшите насыщенность (двигаемся влево) и увеличите яркость (двигаемся вверх).
Переходим от одного красного к более «выбеленному» красному
Добавление белого выглядит так:
А что с добавлением чёрного? Что ж, так как чёрный — это по сути весь низ на прямоугольнике цветовой палитры, то нам просто нужно уменьшить яркость. Насыщенность роли не играет.
Переходим от одного красного к более «чёрному» красному.
Эти две стрелки никак не исключают друг друга! Чёрный и белый в HSV не противопоставлены.
В практическом плане, более тёмные оттенки, полученные путём добавления чёрного, тусклее, чем их более светлые вариации.
Более тёмные оттенки выглядят тускло
Вот вам хороший толчок. Попробуйте вместо добавления чёрного убрать белый. Другими словами, одновременно:
- Увеличьте насыщенность
- Снизьте яркость
Или вот, если диаграммы вам больше по душе:
Двигаемся от одного красного к менее выбеленному красному.
Это даст вам более богатые тёмные оттенки:
Более тёмные оттенки выглядят богаче
Убрать белый — то есть «обогатить» свои более тёмные оттенки — «правильный» путь к созданию более тёмных цветовых вариаций более чем в 95% случаев.