Коротко: цвет текста меняют свойством color. Значение задают по-разному: ключевым словом (red), HEX (#ff0000), RGB (rgb(255,0,0)), RGBA с прозрачностью или HSL (hsl(0 100% 50%)). Правило простое: селектор { color: значение; }.
Пять способов задать цвет
| Формат | Пример | Когда использовать |
|---|---|---|
| Ключевое слово | red, tomato |
быстро, но ограниченный набор |
| HEX | #ff0000, #f00 |
чаще всего в макетах и дизайне |
| RGB | rgb(255 0 0) |
когда цвет считают по каналам |
| RGBA | rgba(0,0,0,.6) |
нужна прозрачность |
| HSL | hsl(0 100% 50%) |
удобно осветлять/затемнять один и тот же тон |
Вкладки: как менять цвет на практике
body { color: #222; }
h1 { color: #003F8F; }
.lead { color: #505050; }Цвет наследуется: задайте его на body — и весь текст подтянет его, если у элемента не задано своё.
.hint { color: rgba(0, 0, 0, 0.6); }Прозрачный текст сливается с фоном (или с картинкой под ним). Полезно для подписей и второго плана. Не делайте слишком бледным — страдает читаемость.
:root {
--color-blue: #003F8F;
--color-red: #992222;
}
.link { color: var(--color-blue); }CSS-переменные позволяют менять цвет бренда в одном месте. Это правильный подход для больших сайтов.
a { color: #003F8F; }
a:hover { color: #992222; }
a:visited { color: #6b4b9e; }У ссылок есть состояния: обычное, наведение, посещённая. Задавайте все три, иначе браузер подставит свои цвета.
color: red !important; «побеждает» почти всё и потом мешает править. Прежде чем ставить !important, разберитесь со специфичностью селектора.Почему цвет не применяется
Причина почти всегда в специфичности: более конкретный селектор побеждает. Порядок приоритета (сверху — сильнее):
- инлайн-стиль
style="color:..."в HTML; - селектор по id:
#header { color: ... }; - селектор по классу и атрибуту:
.title,[href]; - селектор по тегу:
p,h1.
Если цвет «не слушается» — откройте DevTools, вкладку Computed: там видно, какое правило победило и из какого файла.
Контраст: про заботу о глазах
Светло-серый текст на белом фоне выглядит «стильно», но его тяжело читать. Проверяйте контраст: у основного текста он должен быть высоким (примерно как у #222 на белом). Для крупных заголовков допустим меньший контраст, для мелкого текста — только высокий.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Цвет не меняется | более специфичный селектор сверху | уточнить селектор, убрать !important |
| Ссылки остались синими | не заданы состояния :visited |
описать a, a:hover, a:visited |
| Текст бледный на фото | нет подложки/тени | затемнить подложку или добавить text-shadow |
| Цвет «слетает» в форме | у полей своё наследование | задать color прямо для input |
Проверьте себя
Вопросы и ответы
Это одно и то же в разных формах: #ff0000 = rgb(255 0 0). HEX компактнее, RGB нагляднее по каналам.
Используйте HSL: меняйте третье значение (lightness) — например hsl(214 100% 28%) → hsl(214 100% 45%). Или применяйте color-mix().
Элементы форм не всегда наследуют цвет от родителя — браузер задаёт им стили по умолчанию. Пропишите color явно для input и textarea.
Через «Внешний вид» → «Настроить» → «Дополнительные стили» (в блочных темах — «Стили»). Правки хранятся отдельно и не слетают при обновлении.
Итоги
- Цвет текста — свойство
color, наследуется от родителя. - HEX для макетов, rgba для прозрачности, HSL для оттенков.
- Описайте состояния ссылок и следите за контрастом.
- Цвета бренда храните в CSS-переменных.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.