Форматы цвета в CSS
- HEX (#rrggbb) — самый популярный в вёрстке. Пример: #2563eb
- RGB (r, g, b) — три канала 0–255. Легко добавить прозрачность через rgba()
- HSL (hue, saturation, lightness) — оттенок, насыщенность, светлота. Самый удобный для создания палитр
Когда использовать какой формат
HEX — для констант и фирменных цветов. RGB/RGBA — когда нужна прозрачность. HSL — для создания тёмных/светлых вариантов (меняйте только L). В CSS-переменных удобно хранить HSL-значения.
Часто задаваемые вопросы
Как найти HEX цвет с сайта конкурента?
Расширение ColorZilla (Chrome/Firefox) — пипетка захватывает цвет с любого элемента. Или F12 → Elements → кликните на цветной квадратик рядом со свойством CSS.
Как создать тёмную версию цвета?
Через HSL — меняйте только параметр Lightness. Пример: #2563eb = hsl(217, 91%, 53%). Тёмный: hsl(217, 91%, 35%). Светлый: hsl(217, 91%, 95%).
Как добавить прозрачность к HEX цвету?
rgba(37, 99, 235, 0.5) — 50% прозрачности. Или 8-значный HEX: #2563eb80 (последние два символа = альфа). Свойство opacity: 0.5 делает прозрачным весь элемент включая дочерние.
Что такое CSS переменные для цветов?
:root { —color-primary: #2563eb; } Затем color: var(—color-primary). При смене темы меняете одну переменную — цвет обновляется по всему сайту. Для тёмного режима: @media (prefers-color-scheme: dark) { :root { —color-primary: #60a5fa; } }
