Справочник CSS

Color: цвет текста и декоративных элементов

color задаёт цвет текста и наследуется дочерними элементами. Многие SVG-иконки и рамки можно связать с ним через currentColor.

Форматы

.title { color: #171927; }
.hint { color: rgb(75 85 110 / 80%); }
.link { color: hsl(235 78% 58%); }

Выбери единый формат для проекта. CSS-переменные помогают не копировать значения.

CurrentColor

.button { color: #fff; border: 1px solid currentColor; }
.button svg { fill: currentColor; }

Контраст

Светло-серый текст на белом фоне трудно читать. Проверяй контраст основного текста, ссылок и состояний интерфейса.

Ошибки

Смысл передаётся только цветом.
Цвет задан каждому вложенному элементу без необходимости.
Состояние hover снижает контраст.

Попробуй

Создай переменные для основного, приглушённого и акцентного текста.

Как собрать понятную цветовую систему

Цвет лучше задавать не случайными значениями по всему файлу, а через CSS-переменные. Названия вроде --text, --surface и --accent описывают назначение, поэтому тему легче менять. Формат HEX удобен для макета, rgb — для прозрачности, а hsl помогает логично изменять светлоту и насыщенность.

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

Разберём рабочий пример

:root {
  --text: #171923;
  --muted: #617087;
  --accent: #605cf4;
  --surface: #f4f3ff;
}

.link { color: var(--accent); }
.link svg { fill: currentColor; }

Не копируй пример вслепую: измени данные, убери одну строку и посмотри, как меняется результат. Такой эксперимент быстрее показывает роль каждой части кода, чем простое чтение.

Проверка перед использованием

Цвета названы по роли, а не по оттенку.
Текст хорошо читается на фоне.
Состояния hover и focus заметны.
Иконки могут наследовать currentColor.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.