В вебе один и тот же цвет можно записать несколькими способами. Все три основных формата — HEX, RGB и HSL — поддерживаются во всех современных браузерах и CSS-препроцессорах. Выбор формата — вопрос удобства и соглашений команды.
HEXСамый популярный
#c8002a · #C8002A · #f00 = #ff0000
Шестнадцатеричная запись трёх байт: #RRGGBB. Каждая пара — значение канала от 00 до FF. Краткая форма #RGB раскрывается в #RRGGBB. Регистр не важен. Поддерживает прозрачность: #RRGGBBAA.
RGBДля JS и Canvas
rgb(200, 0, 42) · rgba(200, 0, 42, 0.5)
Три канала Red / Green / Blue, каждый от 0 до 255. Форма rgba() добавляет четвёртый параметр — прозрачность от 0 (прозрачный) до 1 (непрозрачный). Удобен для вычислений и анимаций в JavaScript.
HSLДля дизайнеров
hsl(348, 100%, 39%) · hsla(H, S%, L%, a)
Hue (оттенок) — угол на цветовом круге 0–360°. Saturation — 0% серый, 100% чистый цвет. Lightness — 0% чёрный, 50% цвет, 100% белый. Легко создавать светлые/тёмные варианты — просто меняйте L.
Когда чтоПрактика
дизайн-система → HSL · Figma → HEX · JS → любой
HEX — стандарт дизайн-передачи, копируется из Figma. RGB — для динамических стилей в JS, Canvas, SVG-фильтров. HSL — для дизайн-токенов, где нужно управлять вариантами --color-500, --color-600.