Цвета в CSS

CSS поддерживает множество цветовых форматов: именованные цвета, hex, rgb/rgba, hsl/hsla, а также современные oklch и oklab. Выбор формата влияет на читаемость кода, гибкость управления и точность цветопередачи.

Зачем нужно

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

Где используется

  • Цвет текста (color), фона (background-color), границ (border-color)
  • Тени (box-shadow, text-shadow)
  • Градиенты
  • SVG-стилизация
  • Дизайн-системы (токены цветов)
  • Тёмная тема

Предпосылки

Именованные цвета (Named Colors)

CSS определяет 148 именованных цветов:

.red    { color: red; }
.blue   { color: blue; }
.coral  { color: coral; }
.teal   { color: teal; }
.gold   { color: gold; }
.slate  { color: slategray; }

Полезные специальные значения:

.transparent { background-color: transparent; } /* Полностью прозрачный */
.current     { border-color: currentColor; }    /* Наследует значение color */

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

HEX — шестнадцатеричный формат

.color1 { color: #ff0000; }     /* Красный */
.color2 { color: #f00; }        /* Сокращённый — тоже красный */
.color3 { color: #ff000080; }   /* С прозрачностью 50% (8 символов) */
.color4 { color: #f008; }       /* Сокращённый с прозрачностью */
Формат Пример Описание
#RRGGBB #3498db 6 символов — полный
#RGB #39d 3 символа — сокращённый
#RRGGBBAA #3498db80 8 символов — с альфа-каналом
#RGBA #39d8 4 символа — сокращённый с альфа

RGB / RGBA

/* Классический синтаксис */
.old { color: rgb(52, 152, 219); }
.old { color: rgba(52, 152, 219, 0.5); }

/* Современный синтаксис (рекомендуется) */
.new { color: rgb(52 152 219); }
.new { color: rgb(52 152 219 / 0.5); }
.new { color: rgb(52 152 219 / 50%); }
Компонент Диапазон Описание
R (Red) 0–255 или 0%–100% Красный канал
G (Green) 0–255 или 0%–100% Зелёный канал
B (Blue) 0–255 или 0%–100% Синий канал
A (Alpha) 0–1 или 0%–100% Прозрачность

HSL / HSLA

HSL интуитивнее для человека — оттенок, насыщенность, яркость:

/* Классический */
.old { color: hsl(204, 70%, 53%); }
.old { color: hsla(204, 70%, 53%, 0.5); }

/* Современный */
.new { color: hsl(204 70% 53%); }
.new { color: hsl(204 70% 53% / 0.5); }
Компонент Диапазон Описание
H (Hue) 0–360 Оттенок (градусы на цветовом круге)
S (Saturation) 0%–100% Насыщенность (0% = серый)
L (Lightness) 0%–100% Яркость (0% = чёрный, 100% = белый)
A (Alpha) 0–1 или 0%–100% Прозрачность

Палитра через HSL

:root {
  /* Один оттенок, разная яркость */
  --blue-100: hsl(220 90% 95%);
  --blue-200: hsl(220 90% 85%);
  --blue-300: hsl(220 90% 75%);
  --blue-400: hsl(220 90% 65%);
  --blue-500: hsl(220 90% 55%);
  --blue-600: hsl(220 90% 45%);
  --blue-700: hsl(220 90% 35%);
  --blue-800: hsl(220 90% 25%);
  --blue-900: hsl(220 90% 15%);
}

OKLCH — современное цветовое пространство

OKLCH — перцептуально однородное пространство: изменение яркости на одну единицу визуально воспринимается одинаково.

.color {
  color: oklch(60% 0.15 250);
  /* L: 0%–100% яркость */
  /* C: 0–0.4 хрома (насыщенность) */
  /* H: 0–360 оттенок */
}

/* С прозрачностью */
.transparent {
  color: oklch(60% 0.15 250 / 0.5);
}

Преимущества OKLCH над HSL

/* HSL — яркость визуально неравномерна */
.yellow { color: hsl(60 100% 50%); }  /* Визуально ОЧЕНЬ яркий */
.blue   { color: hsl(240 100% 50%); } /* Визуально тёмный */
/* Оба имеют L=50%, но выглядят совершенно по-разному */

/* OKLCH — одинаковая яркость выглядит одинаково */
.yellow { color: oklch(80% 0.15 90); }
.blue   { color: oklch(80% 0.15 250); }
/* Оба реально выглядят одинаково по яркости */

Палитра через OKLCH

:root {
  --brand-50:  oklch(97% 0.02 250);
  --brand-100: oklch(93% 0.05 250);
  --brand-200: oklch(85% 0.10 250);
  --brand-300: oklch(75% 0.15 250);
  --brand-400: oklch(65% 0.18 250);
  --brand-500: oklch(55% 0.20 250);
  --brand-600: oklch(45% 0.18 250);
  --brand-700: oklch(35% 0.15 250);
  --brand-800: oklch(25% 0.10 250);
  --brand-900: oklch(15% 0.05 250);
}

OKLAB

.color {
  color: oklab(60% 0.1 -0.1);
  /* L: 0%–100% яркость */
  /* a: -0.4–0.4 зелёный–красный */
  /* b: -0.4–0.4 синий–жёлтый */
}

currentColor

Ключевое слово, ссылающееся на вычисленное значение color:

.icon-link {
  color: #3498db;
  border-bottom: 2px solid currentColor; /* Синяя граница */
  text-decoration: none;
}
.icon-link:hover {
  color: #e74c3c; /* Граница тоже станет красной */
}

/* SVG-иконка наследует цвет текста */
.icon {
  fill: currentColor;
}

transparent

/* Полностью прозрачный цвет */
.ghost-button {
  background-color: transparent;
  border: 2px solid currentColor;
}

/* Используется в градиентах */
.fade {
  background: linear-gradient(to bottom, black, transparent);
}

Системные цвета

Цвета из ОС пользователя (полезно для доступности):

.system {
  color: CanvasText;        /* Цвет текста ОС */
  background: Canvas;       /* Цвет фона ОС */
  border-color: ButtonBorder; /* Цвет границ кнопок ОС */
}

/* Полный список основных */
/* Canvas, CanvasText, LinkText, VisitedText,
   ActiveText, ButtonFace, ButtonText, ButtonBorder,
   Field, FieldText, Highlight, HighlightText,
   Mark, MarkText, GrayText */

Функция color-mix

Смешивание двух цветов:

.mixed {
  /* 50% красного + 50% синего */
  background: color-mix(in srgb, red, blue);

  /* 30% красного + 70% синего */
  background: color-mix(in srgb, red 30%, blue);

  /* Смешивание в OKLCH (лучше для дизайна) */
  background: color-mix(in oklch, #3498db, #e74c3c);
}

/* Тёмная/светлая вариация цвета */
:root {
  --primary: #3498db;
  --primary-light: color-mix(in oklch, var(--primary), white 30%);
  --primary-dark: color-mix(in oklch, var(--primary), black 30%);
}

Relative Color Syntax

Создание нового цвета на основе существующего:

:root {
  --brand: #3498db;

  /* Осветлить */
  --brand-light: oklch(from var(--brand) calc(l + 0.2) c h);

  /* Уменьшить насыщенность */
  --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);

  /* Изменить оттенок */
  --brand-warm: oklch(from var(--brand) l c calc(h + 30));

  /* Добавить прозрачность */
  --brand-50: oklch(from var(--brand) l c h / 0.5);
}

Сравнение форматов

Формат Читаемость Палитры Wide gamut Рекомендация
Named Отличная Нет Нет Для прототипов
HEX Средняя Нет Нет Для дизайнеров
RGB Средняя Нет Нет Для совместимости
HSL Хорошая Да Нет Для палитр (legacy)
OKLCH Хорошая Отличная Да Для новых проектов

Частые ошибки

  1. Путаница opacity и alpha-канал — opacity влияет на весь элемент и его потомков:

    /* Полупрозрачный фон + непрозрачный текст */
/* НЕПРАВИЛЬНО */
.box { background: blue; opacity: 0.5; } /* Текст тоже прозрачный! */

/* ПРАВИЛЬНО */
.box { background: rgb(0 0 255 / 0.5); } /* Только фон прозрачный */

  2. HSL-палитры с визуально неравномерной яркостью — используйте OKLCH

  3. Хардкод цветов вместо переменных — тяжело поддерживать тему:

    /* ПЛОХО */
.btn { background: #3498db; }
.link { color: #3498db; }

/* ХОРОШО */
:root { --primary: #3498db; }
.btn { background: var(--primary); }
.link { color: var(--primary); }

  4. Забыт transparent в градиентах — rgba(0,0,0,0) при переходе даёт тёмный оттенок, а transparent корректен

Практика

  • Создать палитру из 9 оттенков одного цвета через HSL
  • Пересоздать палитру через OKLCH и сравнить визуально
  • Использовать currentColor для SVG-иконок рядом с текстом
  • Применить color-mix для создания hover-состояний
  • Создать тёмную тему через CSS-переменные с цветами

Связанные темы

Ресурсы