Коротко: цвет в CSS прописывают в свойстве color (текст), background-color (фон) или border-color (граница). Само значение задают в форматах: #rrggbb (HEX), rgb()/rgba(), hsl() или ключевым словом. Ниже — как писать правильно и где хранить цвета, чтобы не искать их по всему файлу.
Куда именно пишется цвет
| Свойство | Что красит | Пример |
|---|---|---|
color |
текст | color: #222; |
background-color |
фон | background-color: #f3f3f3; |
border-color |
рамку | border: 1px solid #003F8F; |
outline-color |
обводку фокуса | outline-color: #992222; |
fill / stroke |
заливку и контур SVG | fill: currentColor; |
Вкладки: форматы записи цвета
color: #003F8F;
color: #fff; /* короткая запись #ffffff */
color: #003F8F80; /* 8 знаков: цвет + прозрачность */Самый частый формат — его вы копируете прямо из макета или пипетки. В 6-значном виде первые две цифры — красный, потом зелёный и синий.
background: rgb(255 255 255);
color: rgba(0, 0, 0, 0.55); /* альфа = прозрачность */Каналы от 0 до 255. rgba добавляет прозрачность от 0 до 1. Современный синтаксис позволяет писать rgb(0 0 0 / 55%).
color: hsl(214 100% 28%); /* тон, насыщенность, светлота */
color: hsl(214 100% 28% / .5); /* с прозрачностью */HSL удобен тем, что оттенок, «сочность» и светлота разделены. Легко сделать тот же тон темнее или светлее, меняя только последнее число.
:root {
--color-brand: #003F8F;
--color-accent: #992222;
--color-text: #505050;
}
.btn { background: var(--color-brand); }
.badge { color: var(--color-accent); }Правильный подход для проекта: все цвета в одном месте. Захотелось сменить фирменный синий — правите одну строку, а не сотни правил.
color: red удобно набросать, но в проекте используйте точные значения. Слов в таблице цветов ограниченное число, и они не совпадут с брендбуком.Прозрачность: два разных подхода
/* 1. Прозрачный цвет — фон просвечивает сквозь текст */
.hint { color: rgba(0,0,0,.6); }
/* 2. Прозрачность всего элемента */
.fade { opacity: .6; }Важная разница: rgba делает прозрачным только цвет, а opacity — весь элемент вместе с текстом и картинками. Для «приглушённой» плашки чаще берут rgba.
Шпаргалка: где что писать
- Цвета бренда — в
:rootкак переменные. - Текст —
color, фон —background-color. - Прозрачные слои —
rgba, а неopacity. - Состояния ссылок — отдельные правила для
:hoverи:visited. - Проверка — инспектор браузера и проверка контраста.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Цвет не применяется | забыт # или опечатка в значении |
проверить формат |
| Весь блок стал прозрачным | использован opacity вместо rgba |
применить rgba к цвету |
| Цвет фона «просвечивает» | перепутаны color и background-color |
уточнить свойство |
| Кнопка меняет цвет сама | стили браузера по умолчанию | задать цвета для всех состояний |
Проверьте себя
opacity отличается от rgba?
Вопросы и ответы
Для копирования из макета — HEX. Для программных правок и прозрачности — RGBA/HSL. На результат они влияют одинаково, разница в удобстве записи.
Пропишите body { background-color: #fff; }. Если фон должен идти на всю высоту, убедитесь, что у html и body нет лишних отступов.
Это ключевое слово, которое берёт текущий цвет текста. Удобно для SVG-иконок: fill: currentColor — иконка сама подхватит цвет ссылки или кнопки.
Через «Внешний вид» → «Настроить» → «Дополнительные стили» или в редакторе стилей блочной темы.
Итоги
- Цвет прописывают в
color,background-color,border-color. - Форматы: HEX, rgb/rgba, hsl, ключевые слова.
- Прозрачный слой —
rgba;opacityделает прозрачным весь элемент. - Фирменные цвета храните в переменных
:root.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.