Русский
Преобразуйте между HEX, RGB, HSL и OKLCH с живым предпросмотром.
Последнее обновление
#B18CFFrgb(177, 140, 255)hsl(259, 100%, 77%)oklch(72.2% 0.165 296.9)Конвертер цветов берёт цвет в любом популярном формате — HEX, RGB, HSL, OKLCH — и показывает его во всех остальных. Это рабочая лошадка дизайнеров и фронтендеров: подобрать брендовый цвет, разобраться с CSS-переменными, сравнить палитры для тёмной и светлой темы или проверить контраст по доступности.
В CSS есть несколько цветовых моделей, и у каждой свои сильные стороны. HEX и RGB описывают цвет через красный, зелёный и синий каналы. HSL устроен интуитивнее — это тон, насыщенность и светлота. OKLCH — перцептивная модель: одинаковые числовые шаги в ней воспринимаются глазом одинаково, поэтому она особенно хороша для генерации оттенков и доступных палитр.
Доступность определяется не самим цветом, а контрастом. WCAG задаёт коэффициент контраста между текстом и фоном — минимум 4.5:1 для обычного текста и 3:1 для крупных заголовков. Хороший инструмент сразу показывает оба числа рядом с цветом, чтобы вы случайно не выкатили в продакшен нечитаемый интерфейс.
#ff8800 и rgb(255, 136, 0) — один и тот же цвет.L на 10% — изменение светлоты глаз воспринимает примерно одинаково для любого тона. В HSL так не работает.Вставьте любое значение в HEX, RGB, HSL или OKLCH или возьмите цвет пипеткой / системным пикером.
Конвертер показывает один и тот же цвет во всех поддерживаемых форматах. Кликните по любому значению, чтобы скопировать его в буфер.
Двигайте ползунок светлоты, чтобы получить светлый или тёмный оттенок. Используйте L из OKLCH — шаги будут зрительно ровными.
Панель контраста показывает коэффициент WCAG относительно белого и чёрного. Цельтесь в ≥ 4.5 для обычного текста и ≥ 3 для крупных заголовков.
Берите тот формат, который принят в проекте: HEX — для дизайн-токенов, OKLCH — для современных палитр, HSL — когда удобно подкручивать через calc().
Пять форматов, с которыми сталкиваешься каждый день, на примере одного и того же цвета. Полная справка по синтаксису — на странице <color> на MDN.
| Формат | Синтаксис | Пример (оранжевый) |
|---|---|---|
| HEX | #RRGGBB или #RGB | #ff8800 |
| HEX с альфой | #RRGGBBAA | #ff880080 (прозрачность 50%) |
rgb() | Красный, зелёный, синий 0–255 | rgb(255 136 0) |
rgb() с альфой | Современный синтаксис со слешем | rgb(255 136 0 / 0.5) |
hsl() | Тон 0–360°, насыщ. 0–100%, светл. 0–100% | hsl(32 100% 50%) |
oklch() | Светлота 0–100%, хрома, тон | oklch(74% 0.18 50) |
| Именованный | Именованный цвет CSS (всего 147) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);Все четыре строки дают абсолютно одинаковый синий. Какой формат выбрать для дизайн-токенов — вопрос того, как удобнее их потом подкручивать.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);Фиксируем тон (268) и хрому, шагаем только по светлоте — и получаем палитру, где каждый шаг *выглядит* как одинаковая дельта. HSL такого не гарантирует.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5 — современный способ задать альфу в CSS. В HEX к концу дописываются две шестнадцатеричные цифры альфы (80 ≈ 50%).
hsl(60 100% 50%) (жёлтый) и hsl(240 100% 50%) (синий) имеют одинаковый L, но по яркости воспринимаются совершенно по-разному — для визуального сравнения берите OKLCH.#abc) — это сокращение от шестизначного (#aabbcc).rgba(...) вместо современного rgb(... / alpha) — работают оба, но запись со слешем соответствует актуальной спецификации и проще читается в инструментах.#RR, GG, BB) и переведите каждую пару из шестнадцатеричной системы в десятичную. Или просто вставьте значение в конвертер цветов — RGB увидите сразу.L далеко не всегда выглядит одинаково ярким. OKLCH равномерен по восприятию, поэтому он лучше подходит для генерации согласованных оттенков и доступных палитр.