* Ваши данные не передаются на сервер. Все вычисления выполняются прямо в браузере
HEX
RGB
HSL
HSV
CMYK
LAB
OKLCH
HSV указан для справки. В CSS нет функции hsv() — используйте HSL.
CSS-переменная
--color-primary: #06d6a0;Утилита Tailwind
bg-[#06d6a0]Tailwind v4 @theme
@theme {
--color-primary: oklch(78% 0.16 167);
}О конвертации цветов
Конвертер цветов переводит один и тот же цвет между форматами, используемыми в вебе, печати и дизайне: HEX для CSS, RGB/HSL для настройки «на лету», CMYK для печати, LAB/OKLCH для перцептуальной равномерности.
Цветовые пространства
HEX — компактная 6/8-значная запись RGB. Стандартный формат для CSS.
RGB — аддитивные компоненты 0–255. Прямое отображение на пиксели экрана.
HSL — тон/насыщенность/яркость. Проще для восприятия, чем RGB.
HSV — тон/насыщенность/значение. Распространён в графических редакторах, но не является CSS-функцией.
CMYK — субтрактивные компоненты для печати. Приближённое значение при конвертации из RGB.
LAB — перцептуально равномерное пространство: одинаковое числовое расстояние ≈ одинаковое визуальное различие.
OKLCH — современное перцептуальное пространство; предпочтительный формат для Tailwind v4 и CSS Color Module Level 4.
Контраст (WCAG vs APCA)
WCAG 2.1 использует коэффициент яркости (от 1:1 до 21:1) с порогами AA/AAA. Широко поддерживается, но не полностью учитывает восприятие мелкого текста или тёмную тему.
APCA — кандидат для WCAG 3 с учётом полярности и оценкой Lc. Лучше коррелирует с читаемостью тонкого или мелкого текста.
Советы
- Используйте пипетку, чтобы выбрать цвет с любого пикселя на экране (браузеры на Chromium).
- Перетащите изображение на вкладку «Палитра», чтобы извлечь 6 доминирующих цветов методом медианного разреза.
- Tailwind v4 генерирует цвета в OKLCH для перцептуальной плавности — скопируйте блок @theme, чтобы соответствовать этому подходу.