color

Пример

<p class="note">Цвет задан у абзаца, а <strong>жирный фрагмент</strong> его унаследовал.</p>

.note {
  color: darkslateblue;
}

Синтаксис

color: <color>;

Начальное значение

CanvasText

Применяется к

всем элементам и тексту

Наследуется

да

Анимируется

как цвет

Вычисляемое значение

вычисленный цвет

Начальное значение CanvasText — системный цвет текста: тёмный в светлой теме и светлый в тёмной (при color-scheme: dark).

Значения

Именованный цвет

Одно из 148 названий: red, teal, rebeccapurple. Отдельное слово transparent — полностью прозрачный цвет.

Шестнадцатеричная запись

#rrggbb или короткая #rgb, с прозрачностью — #rrggbbaa: #1e90ff, #09f, #00000080.

rgb() и hsl()

Красный, зелёный и синий каналы или тон, насыщенность и светлота: rgb(30 144 255), hsl(210 100% 56%). Прозрачность — через косую черту: rgb(0 0 0 / 50%).

oklch() и oklab()

Цвет в перцептивно равномерном пространстве: одинаковая светлота выглядит одинаково светлой у разных тонов. Удобно для палитр: oklch(62% 0.19 250).

currentColor

Текущее значение color элемента. Полезно в других свойствах, а в самом color означает «как у родителя».

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

Canvas, CanvasText, LinkText и другие — цвета интерфейса, которые следуют настройкам системы и режиму высокой контрастности.

Как понять

color наследуется: задайте его у body — и весь текст страницы станет этого цвета, пока какой-нибудь элемент не переопределит его. Ссылки и поля форм — исключения: у них свои цвета в стилях браузера.

Второе важное свойство — currentColor. По умолчанию его используют рамка (border-color), обводка (outline-color), подчёркивание и другие декорации текста. Поэтому, меняя color, вы часто меняете и их: иконка в SVG с fill="currentColor" перекрашивается вместе с текстом кнопки.

Примеры

Рамка и иконка в цвет текста

Наведите курсор на кнопку — рамка и иконка сменят цвет вместе с текстом:

<button class="button" type="button">
  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
    <circle cx="8" cy="8" r="6" fill="currentColor" />
  </svg>
  Готово
</button>

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5rem 1rem;
  color: seagreen;
  background: none;
  border: 2px solid; /* цвет рамки = currentColor */
}

.button:hover {
  color: darkorange;
}

Приглушённый текст с прозрачностью

Полупрозрачный цвет подстраивается под любой фон:

<p>Заголовок новости</p>
<p class="muted">2 часа назад</p>

.muted {
  color: rgb(0 0 0 / 60%);
}

Подсказки

• Проверяйте контраст: по WCAG обычный текст должен контрастировать с фоном не меньше чем 4,5: 1, крупный — 3: 1. Светло-серый на белом — частая ошибка.
• Не передавайте смысл только цветом: красный текст ошибки стоит дополнить иконкой или словом.
• В режиме высокой контрастности Windows (forced-colors: active) браузер заменяет цвета системными — используйте currentColor и системные цвета, чтобы интерфейс не развалился.
• Цвета ссылок задаются в правилах для a: наследованный от родителя color на них не действует, пока не написано a { color: inherit; }.