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% |
Оставьте достаточно контраста между текстом и заземлением (минимум 4,5:1 для обычного текста в WCAG).
Часто задаваемые вопросы
Можно ли писать HEX-код заглавными или стричными буквами?
Да, #ff0000 и #FF0000 дают одинаковый цвет.
Могу ли я использовать значение CMYK на сайте?
CMYK предназначен для печати; дисплей использует HEX, RGB или HSL.
Как добавить прозрачность цвету?
Преобразите HEX в RGB и введите прозрачность между 0 и 1 в итоговом значении в формате rgba().