Основы цвета: тон, насыщенность, светлота

Чтобы управлять цветом, нужно сначала научиться о нём говорить: тон, насыщенность, светлота.

«Цвет — это место, где встречаются наш мозг и вселенная». — Пауль Клее

Прежде чем собирать палитру, надо освоить словарь. Цвет удобно описывать тремя параметрами модели HSL: Hue (тон — какой это цвет, красный/синий/зелёный), Saturation (насыщенность — насколько он сочный или блёклый) и Lightness (светлота — насколько светлый или тёмный). Это удобнее, чем думать в шестнадцатеричных кодах.

Цветовой круг

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

  ЦВЕТОВОЙ КРУГ (упрощённо)

           жёлтый
      оранж         салат
   красный   (О)    зелёный
      пурпур        циан
           синий

  рядом   = аналогичные (мягко)
  напротив = комплемент (контраст)

Три ручки управления

Меняя только светлоту одного тона, вы получаете оттенки для состояний (обычная кнопка, при наведении, нажатая). Снижая насыщенность, получаете спокойные фоны. Это даёт целую палитру из одного цвета без хаоса.

  ОДИН ТОН -> ШКАЛА СВЕТЛОТЫ

  очень  светлее  база  темнее  очень
  светл                          тёмн
  [░░] [▒▒] [▓▓] [██] [▓█]
  фон   ховер  база  актив  текст

Как делают ПЛОХО

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

Как делают ХОРОШО

Берут один базовый тон, строят из него шкалу светлоты, добавляют нейтральные серые для текста и фона и один акцент для действий. Палитра выглядит цельной и спокойной.

Параметр HSL	Что регулирует	Пример применения
Hue (тон)	Какой это цвет	Выбор бренд-цвета
Saturation	Сочность	Спокойные фоны = ниже
Lightness	Светлоту	Состояния кнопки

Чек-лист

Я описываю цвет через тон/насыщенность/светлоту, а не наугад.
Оттенки для состояний делаю из одного тона.
Не все цвета на максимальной насыщенности.
Понимаю разницу тёплых и холодных тонов.

Когда вы понимаете, что цвет описывается тремя числами — тоном (H), насыщенностью (S) и светлотой (L), — становится понятно, почему дизайнеры мыслят в HSL, а не в RGB. Экран физически смешивает красный, зелёный и синий свет, но человеку невозможно держать в голове, какой из шестнадцатеричных кодов чуть светлее и холоднее. В HSL же вы просто крутите одну ручку: хотите тот же цвет, но темнее — уменьшаете L, оставив H и S нетронутыми. RGB — это язык железа, HSL — язык человека.

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

Два нюанса, на которых спотыкаются новички. Первый: цвет несёт культурный смысл, и он не универсален. Белый на западе — чистота и свадьба, а в ряде азиатских культур — траур; красный для нас тревога, в Китае — удача. Делаете продукт для другой страны — проверяйте значения, а не полагайтесь на интуицию. Второй: чистые, предельно насыщенные цвета на больших площадях буквально утомляют глаз — он не может сфокусироваться и устаёт. Поэтому профессионалы почти всегда чуть приглушают насыщенность: интерфейс становится спокойнее, а смотреть на него можно часами.

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

Итог

Цвет — это управляемые три ручки, а не магия. Освоив HSL, вы перестаёте брать цвета наугад и начинаете строить палитры осознанно.

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