Как задать цвет текста на странице: CSS-свойство color

Цвет текста задаётся не специальным HTML-тегом, а CSS-свойством color. HTML описывает смысл содержимого, CSS отвечает за оформление.

<p class="notice">Срок действия ссылки истёк.</p>​

.notice {  color: #b42318;}​

Устаревший тег <font> использовать нельзя. Inline-стиль style="color: ..." работает, но плохо масштабируется: его трудно переиспользовать и переопределять. Для проекта лучше класс и таблица стилей.

Форматы записи цвета

Один цвет можно описать несколькими способами.

Ключевые слова

.example {  color: rebeccapurple;}​

Именованные цвета удобны для экспериментов, но в дизайн-системе чаще используют точные значения.

HEX

.example {  color: #663399;}​

Формат содержит пары красного, зелёного и синего каналов. Краткая запись #639 равна #663399, но полная обычно читается однозначнее.

RGB с прозрачностью

.example {  color: rgb(102 51 153 / 80%);}​

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

HSL

.example {  color: hsl(270 50% 40%);}​

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

Наследование цвета

color наследуется дочерними элементами. Достаточно задать базовый цвет на <body>:

body {  color: #20242c;  background-color: #ffffff;}​

Абзацы, списки и заголовки получат его, пока более точное правило не задаст другое значение.

Для иконок и границ полезно ключевое слово currentColor:

.tag {  color: #5b21b6;  border: 1px solid currentColor;}​.tag__icon {  fill: currentColor;}​

Теперь текст, рамка и SVG-иконка меняются согласованно.

Цветовые переменные

Повторяющиеся цвета лучше хранить в custom properties:

:root {  --color-text: #20242c;  --color-text-muted: #5d6675;  --color-link: #4f46e5;  --color-link-hover: #3730a3;  --color-danger: #b42318;}​body {  color: var(--color-text);}​.form-error {  color: var(--color-danger);}​

Названия описывают назначение, а не конкретный оттенок. Переменная --color-danger понятнее и устойчивее, чем --red.

Состояния ссылок

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

.article a {  color: var(--color-link);  text-decoration-thickness: 0.08em;  text-underline-offset: 0.18em;}​.article a:visited {  color: #6d28d9;}​.article a:hover {  color: var(--color-link-hover);}​.article a:focus-visible {  outline: 3px solid #f59e0b;  outline-offset: 3px;}​

Состояние :focus-visible особенно важно для клавиатурной навигации. Цвет не должен быть единственным признаком ошибки или статуса: добавьте текст, значок или другое понятное обозначение.

Контраст текста и фона

Красивый оттенок может оказаться нечитаемым. Для обычного текста ориентируйтесь минимум на отношение контраста 4.5:1, для крупного — 3:1. Точный порог зависит от размера и начертания, поэтому проверяйте сочетание инструментом контраста, а не на глаз.

Плохой пример:

.hint {  color: #b7bcc6;  background-color: #ffffff;}​

Светло-серый текст на белом фоне трудно прочитать. «Второстепенный» не значит «почти невидимый».

Учитывайте все состояния: обычное, hover, focus, disabled, выделение текста, светлую и тёмную темы. При системном режиме повышенной контрастности часть цветов может быть заменена браузером — интерфейс должен сохранять смысл.

Локальное исключение

Иногда цвет нужен одному фрагменту:

<p>  Сборка завершена со статусом  <strong class="status status--success">успешно</strong>.</p>​

.status--success {  color: #067647;}​

Класс выражает назначение. Если палитра изменится, HTML останется прежним.

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

• использование <font color="...">;
• множество inline-стилей вместо общих правил;
• выбор цвета без проверки на реальном фоне;
• удаление видимого фокуса у ссылок;
• передача статуса только красным или зелёным цветом;
• чрезмерно специфичные селекторы, которые приходится перебивать через !important.

Что запомнить

Задавайте цвет текста через CSS-свойство color, используйте смысловые классы и переменные, учитывайте наследование и все интерактивные состояния. Всегда проверяйте контраст и не полагайтесь только на цвет при передаче важной информации.

report Сообщить об ошибке в статье