Данные не отправляются на серверы — Вся обработка выполняется в браузере
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, RGB, HSL, OKLCH и другими цветовыми пространствами. Включает визуальный выбор, извлечение палитры из изображений, проверку контрастности WCAG и симуляцию дальтонизма. Работает полностью в браузере.

О преобразовании цветов

Этот цветовой инструмент выполняет преобразование между 7 цветовыми пространствами, генерирует гармонии, проверяет контрастность (WCAG и APCA), симулирует дальтонизм и извлекает палитры из изображений. См. [конвертер систем счисления](/numbase) для hex-вычислений или [сжатие изображений](/image) для обработки графики.

Цветовые пространства
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 для совместимости с этим подходом.

Можно ли извлечь цвета из изображения?

Да. Перетащите любое изображение в область извлечения палитры, чтобы получить доминирующие цвета. Вы также можете симулировать дефекты цветового зрения (протанопию, дейтеранопию, тританопию).

Связанные инструменты

Сжатие изображенийКонвертер систем счисления