Конвертер цветов — HEX, RGB, HSL и OKLCH

Что такое конвертер цветов?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Ключевые возможности

Сравнение альтернатив конвертера цветов

Примеры конвертации цветов

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Как пользоваться конвертером цветов

1. 1

   Вставьте или введите любой цвет в любом формате

   Каждое из 9 полей форматов (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) напрямую редактируемо — нет кнопки «Convert», на которую надо нажимать. Вставьте HEX из Figma, введите значение `oklch()` из конфига Tailwind, бросьте `hsl()` из старой таблицы стилей или даже введите именованный CSS-цвет вроде `tomato`. Инструмент парсит инкрементально по мере ввода, поэтому полу-введённое значение не разрушит остальные, пока вы не зафиксируете валидный формат. Невалидный ввод получает тихую инлайн-ошибку; валидный ввод обновляет всю сетку.

2. 2

   Все 9 форматов обновляются мгновенно

   Внутренний источник истины — OKLCH (перцептивно равномерный, без ограничений цветового охвата), и каждый другой формат выводится из него на каждом нажатии клавиши. Поле, в котором вы сейчас печатаете, сохраняет позицию курсора — только *остальные* восемь полей перерисовываются. Это значит, что вы можете напрямую редактировать канал L в OKLCH и в реальном времени видеть, как сдвигаются HEX, RGB, HSL и CMYK, не теряя курсор. Математика конвертации выполняется полностью на JavaScript с использованием тех же примитивов OKLAB, которые поставляются в современных браузерах.

3. 3

   Используйте пипетку для визуального исследования

   Под сеткой форматов находится квадрат насыщенности–светлоты (тяните в любую точку, чтобы задать S+L для текущего оттенка), слайдер оттенка (тяните, чтобы вращаться по цветовому кругу) и слайдер альфы (тяните, чтобы задать прозрачность). На браузерах на базе Chromium (Chrome, Edge, Brave) кнопка **Eyedropper** активирует нативный API `EyeDropper` — нажмите в любом месте экрана, включая за пределами окна браузера, чтобы взять цвет этого пикселя. Safari и Firefox пока не поставляют API, поэтому кнопка скрыта в этих браузерах, а квадрат SL + слайдер оттенка остаются основной пипеткой.

4. 4

   Проверьте цветовой охват и контраст с одного взгляда

   Три бейджа цветового охвата (**sRGB**, **Display P3**, **Rec2020**) показывают, попадает ли текущий цвет внутрь воспроизводимого диапазона каждого пространства — полезно, когда вы работаете в OKLCH и хотите знать, какие дисплеи отрисуют значение точно. Ряд контраста показывает коэффициент WCAG 2.1 против белого и чёрного, плюс оценку APCA Lc (перспективная метрика WCAG 3). Бейджи pass / fail (AA, AAA) появляются инлайн. Если цвет вне цветового охвата sRGB, кнопка **Snap to sRGB** уменьшает chroma, пока он не впишется.

5. 5

   Копируйте в нативном синтаксисе вашей платформы

   У каждого из 9 полей форматов своя кнопка **Copy** — один клик, значение оказывается в буфере обмена, метка кратко переключается на «Copied!», чтобы вы знали. Под пипеткой раздел **Copy as code** генерирует готовые к вставке сниппеты для пяти платформ: CSS custom property, токен Tailwind v4 `@theme`, литерал SwiftUI `Color(red:green:blue:)`, константа Jetpack Compose `Color(0xFF...)` и Flutter `Color(0xFF...)`. URL-хэш (`#hex=...` или `#oklch=...`) также обновляется, чтобы вы могли поделиться живой ссылкой на точный цвет.

Типичные ошибки в конвертации цветов

Считать палитру HSL перцептивно равномерной:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
На экране они выглядят неравномерно распределёнными.

Использовать OKLCH для перцептивно-равномерных шкал:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
На экране они выглядят равномерно распределёнными.

Отправить наш вывод CMYK прямо в пресс:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Результат печати может выглядеть мутным или пересатурированным.

Отправить исходный HEX типографии:
hex #FF6347 → позволить печатнику сделать ICC-конвертацию против их пресса
Результат печати совпадает с экранным цветом гораздо ближе.

Делать вид, что Lc 60 = WCAG 4.5:1:
APCA Lc 60 → «это проходит AA»
Коэффициент WCAG 2 для той же пары может быть 3.8:1 (не проходит AA).

Проверять обе метрики независимо:
Коэффициент WCAG 2 ≥ 4.5:1 для соответствия AA для основного текста, И
APCA |Lc| ≥ 75 для реальной читаемости.
Обе должны пройти, а не одна подменять другую.

Шагать по L в HSL для оттенков:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% выглядит размытым; 30% выглядит значительно темнее, чем разрыв до 60%.

Шагать по L в OKLCH для оттенков:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Каждый шаг выглядит как один и тот же визуальный разрыв.

Скопировать 8-значный HEX в legacy-парсер:
#FF573380 → парсер обрезает → #FF5733 (без альфы)
50%-прозрачность тихо теряется.

Проверить, что цель поддерживает 8-значный HEX, или использовать rgba():
для современного CSS: #FF573380 (8-значный HEX)
для поддержки legacy: rgba(255, 87, 51, 0.5) (всегда поддерживается)
Явный синтаксис альфы избегает тихого обрезания.

Прижимать каждый цвет OKLCH к sRGB по умолчанию:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
Дисплеи P3 теряют 30%+ насыщенности без причины.

Сначала проверить бейдж Display P3:
если вписывается в P3: оставить значение с широким охватом, добавить sRGB-fallback через @supports
если превышает P3: тогда прижать к sRGB
Позвольте аппаратуре с широким охватом делать свою работу.

Кто пользуется этим инструментом

Frontend-разработчики, мигрирующие на токены OKLCH в Tailwind v4

Tailwind v4 стандартизировал OKLCH для своей палитры по умолчанию в 2024 году. Миграция старой дизайн-системы на HSL или HEX означает конвертацию сотен брендовых цветов в OKLCH. Вставьте каждый HEX, скопируйте вывод OKLCH, бросьте в блок `@theme`. Живые бейджи цветового охвата отмечают любые цвета, превышающие sRGB, чтобы вы могли решить, оставить ли значение с более широким охватом для дисплеев Display P3.

Дизайнеры, переводящие цвета из Figma в iOS / Android

Figma по умолчанию экспортирует HEX, но iOS хочет литералы SwiftUI `Color(red:green:blue:)`, а Android — константы Jetpack Compose `Color(0xFF...)`. Вставьте HEX из Figma один раз, скопируйте сниппет SwiftUI для iOS-инженера и сниппет Compose для Android-инженера — оба уже в точном синтаксисе, которого ожидает каждая платформа, с исходным HEX, сохранённым в комментарии для прослеживаемости.

Дизайнеры, готовящие пробы печати (приближение CMYK)

Когда брендовый цвет должен появиться на печатной визитке, приближение CMYK даёт быструю оценку, чтобы поделиться с типографией до правильной ICC-конвертации. Вставьте брендовый HEX, скопируйте проценты CMYK, отправьте печатнику для быстрого расчёта — затем доверьтесь типографской ICC-конвертации с учётом профиля для окончательного соответствия цвета конкретному прессу.

Инженеры доступности, проверяющие WCAG и APCA

WCAG 2.1 — это регуляторный стандарт (ADA, EAA, Section 508) сегодня; APCA Lc — предложенный преемник WCAG 3. Обе метрики, показанные бок о бок, означают, что дизайнер может проверить, что цвет основного текста достигает 4.5:1 WCAG против белого, затем сверить, что он также проходит APCA Lc 75, на одном экране — без скакания между двумя отдельными калькуляторами.

Преподаватели, обучающие концепциям цветовых пространств

Одновременный девятипольный вид делает отношения между цветовыми пространствами видимыми. Введите значение OKLCH, понаблюдайте, как HSL дрейфует, потому что L означает разное в каждом пространстве. Перетащите слайдер оттенка и понаблюдайте, как HEX, RGB и CMYK все обновляются. Покажите, как бейджи цветового охвата становятся красными, когда вы толкаете chroma за пределы sRGB. Инструмент сам себе аудиторная демонстрация для университетского курса по графике или HCI.

Бренд-менеджеры, ищущие ближайший именованный CSS-цвет

Когда маркетинговый текст говорит «акцент цвета помидора», но реальный брендовый HEX — `#FF6347`, поле Named возвращает `tomato (exact)`, потому что именно в это разрешается `tomato` в CSS-спецификации. Для близких промахов HEX поле возвращает ближайший именованный цвет с расстоянием ΔE в OKLAB — полезно для документации, прозы и неформального именования цветов.

Веб-разработчики, конвертирующие legacy HEX-палитры в OKLCH

Старый сайт может иметь 50-цветную брендовую палитру, определённую в CSS custom properties как HEX-коды. Модернизация в OKLCH позволяет бренд-команде выразить те же шкалы в перцептивно-равномерном пространстве. Вставьте каждый HEX, скопируйте вывод OKLCH, замените определения переменных. Панель Tints/Shades ниже проверяет, что результирующая шкала визуально ровная, перед отгрузкой.

Мейнтейнеры open-source, документирующие дизайн-токены

Документация дизайн-токенов обычно должна показывать один и тот же цвет в нескольких синтаксисах — HEX для блока кода CSS, OKLCH для таблицы спецификации, именованный цвет для упоминаний в прозе. Одновременный вид полей позволяет мейнтейнеру скопировать каждый за один проход вместо запуска трёх отдельных конвертаций. URL-хэш, которым можно поделиться, также позволяет контрибьюторам ссылаться на точный обсуждаемый цвет в GitHub-issue.

Математика и алгоритмы конвертации цветов

OKLCH как внутренний источник истины

Инструмент хранит каноническое значение цвета как тройку OKLCH внутри. Каждое редактируемое поле выводит своё отображаемое значение из этой тройки на каждом нажатии; каждое редактирование пользователя сначала обновляет тройку, затем запускает перерисовку остальных восьми полей. Это устраняет дрейф плавающей точки на каждом шаге, который мучает конвертеры, маршрутизирующие через HSL или sRGB как точку опоры. Выбор OKLCH вместо OKLAB намеренный — полярная форма сохраняет оттенок как стабильную ось, поэтому перетаскивание слайдера оттенка не приводит к случайному кросс-фейду через серый. Согласно статье Бьорна Оттоссона 2020 года, перцептивная равномерность OKLAB — самый сильный аргумент за то, чтобы относиться к нему как к лингва франка современной математики цвета.

Источники матриц (W3C CSS Color 4 + Ottosson 2020)

Каждая матрица конвертации в кодовой базе процитирована к своему первоисточнику. Кусочная гамма-функция sRGB ↔ линейный sRGB — это W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). Матрица 3×3 линейный sRGB ↔ CIE XYZ D65 — это CSS Color 4 §15.1. Матрица XYZ D65 ↔ LMS и шаг кубического корня OKLAB взяты из эталонной реализации Оттоссона `https://bottosson.github.io/posts/oklab/`, точно так, как опубликовано. Никакие матрицы не пересчитываются и не перевыводятся — копирование их дословно делает вывод идентичным эталонным векторам спецификации.

Наивная формула CMYK и оговорка про ICC

Наш вывод CMYK использует стандартную учебниковую формулу: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)`, работающую с нормализованными значениями sRGB. Это намеренное приближение. Реальная точность печати требует конвертации через ICC-профиль против конкретного пресса, чернил (например, US Web Coated SWOP v2, Fogra39, Japan Color 2011) и бумаги, что может сдвинуть каналы на 5–15%. Мы выводим поле CMYK с видимым дисклеймером, чтобы пользователи не отгружали наши значения напрямую в пресс. Воспринимайте вывод как ориентир для расчётов, а не готовый результат.

Определение цветового охвата через проверку диапазона каналов

Цвет считается внутри цветового охвата для целевого пространства (sRGB, Display P3, Rec2020), если каждый канал попадает внутрь `[-ε, 1 + ε]` после конвертации к первичным цветам этого пространства, где `ε = 1e-7` для поглощения шума точности плавающей точки на границах. Бейдж цветового охвата для каждого пространства становится красным, когда любой канал превышает диапазон. Это ловит распространённый случай — цвет OKLCH с широким охватом вроде `oklch(0.7 0.4 30)` сообщает «вне sRGB», но «внутри P3», говоря вам, какие дисплеи отрисуют его точно. Проверка выполняется на каждом нажатии.

Алгоритм snap через уменьшение chroma

Snap to sRGB использует двоичный поиск по оси chroma: фиксирует L и H на текущих значениях, ищет C ∈ [0, currentC] для наибольшего C, чья конвертация в sRGB остаётся внутри цветового охвата. Поиск выполняется максимум 30 итераций (точность ~10⁻⁹), что более чем достаточно для визуальной точности. Это соответствует информативному алгоритму gamut-mapping, описанному в CSS Color 4 §13 — сохранение светлоты и оттенка с уменьшением только chroma удерживает прижатый цвет узнаваемо в том же семействе оттенков. Мы не обрезаем каналы RGB напрямую, потому что это заметно искажает оттенок (особенно в синих).

Матрицы CVD Brettel + Machado

Симуляция дальтонизма использует два опубликованных семейства матриц. Три дихромазии — протанопия, дейтеранопия, тританопия — используют матрицы Brettel-Viénot-Mollon 1997, работающие в линейном RGB (сначала гамма-декодирование, применение матрицы, обратное гамма-кодирование). Три аномальные трихромазии — протаномалия, дейтераномалия, тританомалия — используют матрицы Machado-Oliveira-Fernandes 2009 при тяжести 0,66, что соответствует типичному пациенту с аномальной трихромазией. Ахроматопсия и частичная ахроматомалия используют rec601 luminance weights (`0.299R + 0.587G + 0.114B`) для проекции в оттенки серого. Все восемь симуляций рендерятся при каждом изменении цвета.

WCAG 2 против APCA: что использовать когда

WCAG 2.x (текущий стандарт) вычисляет симметричный коэффициент контраста из относительной яркости: `(L1 + 0.05) / (L2 + 0.05)`, цель 4.5:1 для обычного основного текста и 7:1 для AAA. Это юридический минимум соответствия для аудита доступности в 2026 году. APCA (Accessible Perceptual Contrast Algorithm) — предложенный преемник WCAG 3 — чувствителен к полярности (светлый-на-тёмном оценивается иначе, чем тёмный-на-светлом), лучше коррелирует с воспринимаемой читаемостью, цель `|Lc| ≥ 75` для основного текста. Обе метрики, показанные в одном ряду, позволяют дизайнеру пройти WCAG 2 для соответствия и APCA для реальной читаемости без скакания между двумя отдельными калькуляторами.

Лучшие практики конвертации цветов

Предпочитайте OKLCH для токенов дизайн-системы; HEX для legacy

Для любой новой дизайн-системы, отгружающейся в 2025 году или позже, определяйте брендовые цвета и шкалы палитр в OKLCH. Ось L автоматически даёт перцептивно ровные шкалы; ось chroma может адресовать цвета с широким охватом, которые HEX закодировать не может. Сохраняйте HEX-fallback для старых браузеров через `@supports not (color: oklch(0 0 0))` или сборочный PostCSS, но делайте OKLCH каноническим значением в вашем хранилище токенов. Legacy-системы с тысячами существующих HEX-переменных могут оставаться на HEX до плановой миграции — не меняйте ради самого изменения.

Воспринимайте вывод CMYK как приближение, подтверждайте у типографии

Числа CMYK, которые выводит этот инструмент, — это наивная формула на основе sRGB, а не конвертация через ICC-профиль. Используйте их для приблизительных расчётов и внутренних компов. Перед любым реальным тиражом отправьте исходный HEX (не приближение CMYK) типографии и позвольте им запустить свою ICC-конвертацию против конкретного пресса, чернил и бумаги. Сдвиг каналов в 5–15% от правильной конвертации легко может превратить чёткий красный в мутный оранжевый, если приближение отгружено напрямую.

Используйте APCA Lc для перспективной доступности

WCAG 2.x продолжит быть регуляторным минимумом ещё несколько лет, но APCA — это направление, в котором движется стандарт. Для новых дизайнов достигайте `|Lc| ≥ 75` для основного текста и `|Lc| ≥ 60` для крупного текста рядом с минимумами WCAG 2.1. APCA ловит проблемы читаемости, которые упускает симметричный коэффициент WCAG 2, — особенно тонкий шрифт на ярком фоне, где коэффициент WCAG выглядит нормально, но текст фактически исчезает на нормальном расстоянии чтения.

Прогоняйте цвета с широким охватом через проверку Display P3

Если вы целитесь в современную аппаратуру Apple (iPhone, iPad, MacBook с 2017+) или отгружаете контент с поддержкой HDR, определяйте брендовые цвета в OKLCH и используйте бейдж Display P3, чтобы проверить, что они вписываются в P3, даже если превышают sRGB. Цвета с более широким охватом выглядят заметно более насыщенными на дисплеях P3 и плавно деградируют через применяемое браузером сжатие chroma на экранах только с sRGB. Не прижимайте к sRGB заранее, если только не знаете, что вся ваша аудитория на legacy-дисплеях.

Подбирайте перцептивно равномерные оттенки через тона OKLCH

При генерации шкалы 50/100/200/.../900 для брендового цвета используйте панель Tones: она шагает L равными приращениями при фиксированных C и H. Результат — перцептивно ровная шкала, где визуальный разрыв между 400 и 500 выглядит идентичным разрыву между 500 и 600. Ручная подстройка шкал HSL для той же равномерности — это многочасовое упражнение на каждый цвет; OKLCH даёт это бесплатно.

Используйте Eyedropper умеренно для cross-tab подбора цвета

EyeDropper API (только Chromium на 2026 год) позволяет нажать в любом месте экрана — включая за пределами браузера — чтобы взять цвет этого пикселя. Полезно для подбора цвета со скриншота, кадра видео или UI другого приложения. Воспринимайте результат как стартовую точку, а не как окончательное значение — рендеринг экрана применяет цветовое управление, которое может отличаться от исходного файла. Для канонических брендовых цветов всегда берите HEX из дизайн-источника (Figma, Sketch, брендбук PDF), а не пипеткой со скриншота.

Сохраняйте в закладки URL с `#hex=...` для общих палитр

Текущий цвет автоматически кодируется в URL-хэш как `#hex=...` или `#oklch=...`. Скопируйте URL, вставьте в тред Slack или GitHub-issue, и любой, кто откроет его, окажется на точно том же цвете. Полезно для тредов design-review, где «брендовый синий» должен означать одну конкретную тройку OKLCH. Хэш обновляется при каждом изменении, поэтому URL в адресной строке всегда — живой текущий цвет — добавьте в закладки, чтобы вернуться к конкретной палитре позже.

Часто задаваемые вопросы