HEX, RGB и HSL
- HEX: 16 чисел в формате #RRGGBB. #FF0000 красный, #000000 — чёрный, #FFFFFF — белый. Коды с одинаковыми чётными цифрами могут быть сокращены (#FFF).
- RGB: красный, зелёный и синий каналы со значениями 0–255. rgb(255, 0, 0) — красный. Последнее значение «альфа» (0–1) добавляет прозрачность: rgba(0, 0, 0, 0,5) — полупрозрачный чёрный.
- HSL: оттенок (0–360°), насыщенность и яркость (%). hsl(0, 100%, 50%) — красный. Чтобы получить более светлый или тёмный вариант цвета, достаточно изменить только яркость.
Из HEX в RGB
Каждая двухзначная деталь преобразуется из основания 16 в 10. #3B5998: 3B = 3×16+11 = 59, 59 = 5×16+9 = 89, 98 = 9×16+8 = 152 → rgb(59, 89, 152).
| Цвет | HEX | RGB | HSL |
|---|---|---|---|
| Красный | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Зелёный | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Синий | #0000FF | 0, 0, 255 | 240, 100%, 50% |
Оставляйте достаточный контраст между текстом и фоном (в WCAG — не менее 4,5:1 для обычного текста).
Часто задаваемые вопросы
Можно ли писать HEX-код заглавными или строчными буквами?
Да, #ff0000 и #FF0000 дают одинаковый цвет.
Могу ли я использовать значение CMYK на сайте?
Нет. CMYK предназначен для печати; на экране используются HEX, RGB или HSL.
Как добавить прозрачность цвету?
Переведите HEX в RGB и в формате rgba() укажите последним значением прозрачность от 0 до 1.