Что такое оттенок? Основополагающее свойство цвета

Последнее обновление Сентябрь 04, 2025 7 мин чтения

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

Определение оттенка и его место на цветовом круге

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

Наиболее интуитивной моделью оттенка служит цветовой круг — круговое расположение оттенков, где родственные цвета стоят рядом, а контрастные — напротив. Цветовой круг в том виде, в котором его используют современные дизайнеры, восходит к работам Иоганна Вольфганга фон Гёте («Учение о цвете», 1810) и был уточнён в перцептуальной системе Манселла в начале XX века.

Традиционный художественный цветовой круг организует оттенки вокруг:

Основных цветов: Красный, Жёлтый, Синий (в традиционной пигментной модели)
Вторичных цветов: Оранжевый (красный + жёлтый), Зелёный (жёлтый + синий), Фиолетовый (синий + красный)
Третичных цветов: шесть цветов между основными и вторичными — красно-оранжевый, жёлто-оранжевый, жёлто-зелёный, сине-зелёный, сине-фиолетовый, красно-фиолетовый

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

Оттенок в цветовых моделях HSL и HSV

В цифровом цвете оттенок выражается как угол в градусах от 0 до 360. Это представление используется в обеих наиболее распространённых человекоориентированных цветовых моделях: HSL (Hue, Saturation, Lightness — оттенок, насыщенность, светлота) и HSV (Hue, Saturation, Value — оттенок, насыщенность, значение; также называется HSB).

Угол оттенка

Круг оттенков в HSL и HSV соотносит стандартные цветовые семейства с угловыми значениями:

0° / 360°: Красный — #FF0000
30°: Оранжевый — #FF8000
60°: Жёлтый — #FFFF00
90°: Жёлто-зелёный (зеленовато-жёлтый) — #80FF00
120°: Зелёный — #00FF00
150°: Весенний зелёный — #00FF80
180°: Голубой — #00FFFF
210°: Лазурный — #0080FF
240°: Синий — #0000FF
270°: Фиолетовый — #8000FF
300°: Пурпурный — #FF00FF
330°: Розовый — #FF0080

Угол оттенка одинаков в HSL и HSV — эти две модели используют одно определение оттенка, но по-разному представляют светлоту и насыщенность. Конвертер цветов показывает значения HSL и HSV для любого цвета, так что можно точно видеть, где тот или иной оттенок находится на этой шкале.

Почему круг оттенков начинается с красного

Решение разместить красный при 0° в HSL и HSV — это договорённость, а не закон природы. Красный выбран, потому что он соответствует самой длинной видимой длине волны и интуитивно стоит в «начале» видимого спектра при развёртке от фиолетово-красного обратно к красному. В OKLCH угол оттенка иной: OKLCH hue 0° соответствует розово-красному, а не чистому красному, поскольку OKLCH отображает оттенки с большей точностью в соответствии с человеческим восприятием.

Углы оттенка в CSS (0–360 градусов)

CSS поддерживает угол оттенка в функции hsl() начиная с CSS3. Современная спецификация CSS Color Level 4 расширяет поддержку угла оттенка на все цилиндрические цветовые функции: hsl(), hwb(), lch() и oklch().

Базовое использование HSL с оттенком

/* Чистый красный: оттенок 0 */
color: hsl(0, 100%, 50%);

/* Оранжевый: оттенок 30 */
color: hsl(30, 100%, 50%);

/* Чистый зелёный: оттенок 120 */
color: hsl(120, 100%, 50%);

/* Яркий небесно-голубой: оттенок 200 */
color: hsl(200, 90%, 55%);

/* Глубокий фиолетовый: оттенок 270 */
color: hsl(270, 70%, 40%);

Современный CSS также принимает единицы угла помимо deg:

/* Все три записи — один и тот же оттенок: 60 градусов = жёлтый */
color: hsl(60deg, 100%, 50%);
color: hsl(0.1667turn, 100%, 50%);   /* 60/360 = 0,1667 оборота */
color: hsl(1.0472rad, 100%, 50%);    /* 60° в радианах */

Несмотря на то что градусы остаются стандартом для удобочитаемости, единица turn удобна, когда вы думаете о вращениях оттенка как о долях круга.

Оттенок в OKLCH

В OKLCH угол оттенка по-прежнему находится в диапазоне 0–360, но соответствие цветовым семействам несколько отличается от HSL, поскольку OKLCH построен на основе человеческого восприятия, а не математического удобства:

OKLCH hue ~0–30: Розово-красные и красные
OKLCH hue ~50–80: Оранжевые и жёлтые
OKLCH hue ~120–160: Жёлто-зелёные и зелёные
OKLCH hue ~180–220: Голубые и сине-зелёные
OKLCH hue ~250–280: Синие
OKLCH hue ~300–330: Фиолетовые и пурпурные

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

Сдвиг оттенка и техники вращения

Одно из главных преимуществ представления оттенка в виде угла — цветовые соотношения становятся математическими. Комплементарные цвета, триадические гармонии и аналоговые палитры определяются простым сложением и вычитанием.

Комплементарные цвета (вращение на 180°)

Дополнительный цвет к любому оттенку находится ровно в 180° по цветовому кругу. Комплементарные пары создают максимальный контраст и визуальное напряжение — при одинаковой насыщенности и светлоте они «вибрируют» рядом.

Красный (0°) → Голубой (180°)
Оранжевый (30°) → Лазурный (210°)
Жёлтый (60°) → Синий (240°)
Зелёный (120°) → Пурпурный (300°)

В CSS дополнительный цвет можно вычислить динамически:

:root {
  --primary-hue: 220;
  --complement-hue: calc(var(--primary-hue) + 180);

  --primary: hsl(var(--primary-hue), 80%, 55%);
  --complement: hsl(var(--complement-hue), 80%, 55%);
}

Триадическая гармония (вращение на 120°)

Триадические гармонии делят цветовой круг на три равные части. Начиная с любого оттенка, прибавьте 120° и 240°, чтобы получить сбалансированное триадическое трио.

:root {
  --hue-a: 30;   /* Оранжевый */
  --hue-b: 150;  /* Весенний зелёный */
  --hue-c: 270;  /* Фиолетовый */
}

Аналоговые цвета (сдвиг ±30°)

Аналоговые цвета — соседние по кругу, в пределах 30° друг от друга. Они создают гармоничные, малоконтрастные палитры, которые кажутся естественными и слаженными. Аналоговые палитры часто встречаются в природе (осенняя листва: красные, оранжевые и жёлтые) и в минималистичных дизайн-системах.

:root {
  --primary-hue: 200;          /* Синий */
  --analogous-left: 170;       /* Сине-зелёный */
  --analogous-right: 230;      /* Сине-фиолетовый */
}

Используйте Генератор палитр для исследования любых из этих гармоничных отношений, начиная с любого цвета.

Сдвиг оттенка в цветовых шкалах

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

Например, синий может слегка смещаться в сторону голубого при осветлении и в сторону фиолетового при затемнении, имитируя рассеяние синего света в атмосфере. В OKLCH небольшие корректировки оттенка на ±5–10° при изменении светлоты позволяют создавать более естественно выглядящие шкалы.

Оттенок и цвет: почему это разные вещи

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

Цвет многомерен

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

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

Один оттенок — бесконечное множество цветов

Возьмём оттенок 220° (холодно-синее направление). Все следующие цвета имеют этот единственный оттенок:

#EBF5FF — едва тонированный почти-белый фоновый синий (очень светлый, очень слабая насыщенность)
#90C3F7 — мягкий небесно-голубой (светлый, умеренная насыщенность)
#3498DB — чистый средне-синий (средняя светлота, высокая насыщенность)
#1A5276 — тёмный тёмно-синий (тёмный, умеренная насыщенность)
#0A1A2A — почти чёрный с синим подтоном (очень тёмный, очень слабая насыщенность)

Эти пять цветов выглядят принципиально по-разному, но имеют один и тот же оттенок. Все они принадлежат семейству «синий-220°» — но это не один и тот же цвет.

Почему это различие важно для дизайнеров

Понимание того, что оттенок — это лишь одна характеристика цвета, а не сам цвет, ведёт к более взвешенным цветовым решениям:

Тональная согласованность: Два цвета с разными оттенками, но схожей светлотой и насыщенностью, будут казаться равновесными в композиции.
Цветовая идентичность: «Синий» бренда определяется всеми тремя характеристиками. Просто сказать «мы используем синий» недостаточно — угол оттенка, уровень насыщенности и светлота вместе точно определяют цвет бренда.
Цветовые соотношения: Гармонии — комплементарная, триадическая, аналоговая — это чисто оттеночные соотношения. Их применение требует также правильной настройки светлоты и насыщенности каждого цвета для визуального баланса.
Независимость оттенка: В OKLCH оттенок можно изменить, не меняя воспринимаемую светлоту, — это позволяет создавать аналоговые палитры, где каждый цвет имеет одинаковый визуальный вес.

Ахроматические цвета оттенка не имеют

Чистые чёрные, белые и серые — ахроматические: они вообще не содержат оттенка. Формально оттенок не определён для ахроматических цветов, поскольку нет цветового семейства для отнесения. В HSL ахроматические цвета выражаются с любым значением оттенка и 0% насыщенностью — угол оттенка бессмысленен, когда насыщенность равна нулю. В OKLCH ахроматические цвета имеют насыщенность 0, и значение оттенка опять-таки фактически не определено.

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

Ключевые выводы

Оттенок — это цветовое семейство: ответ на вопрос «какого цвета?» без учёта светлоты и насыщенности. Это фундаментальная характеристика цвета, и всё остальное в описании цвета — её модификация.
На цветовом круге оттенок цикличен и выражается как угол от 0° до 360°. Красный — при 0°, зелёный — при 120°, синий — при 240°, и полный спектр непрерывно возвращается к красному.
В CSS угол оттенка используется в hsl(), hwb(), lch() и oklch(). Принимаются единицы deg, turn и rad, хотя стандартом остаются градусы.
Цветовые соотношения — это арифметика оттенков: комплементарные цвета отстоят на 180°, триадические наборы — на 120°, аналоговые цвета находятся в пределах 30° друг от друга.
Оттенок и цвет — это разные вещи. Цвет включает оттенок, светлоту и насыщенность вместе. Бесконечное множество различных цветов может иметь один и тот же оттенок — от самого бледного тинта до самого тёмного шейда.
Ахроматические цвета (чёрный, белый, чистый серый) оттенка не имеют. Почти-нейтральные цвета с крайне низкой насыщенностью могут технически иметь оттенок, но перцептуально он неразличим.
Конвертер цветов показывает угол оттенка (как в HSL, так и в OKLCH) для любого hex-цвета, поэтому можно точно видеть, где любой цвет находится на круге. Генератор палитр позволяет исследовать гармоничные соотношения, вращая оттенок на математически точные шаги.