Color Picker & Converter

Color Picker & Converter

Выбирайте визуально или вставьте любое значение — HEX, RGB, HSL, OKLCH и OKLAB остаются синхронизированными. Включает проверку контраста WCAG 2.2 и генератор палитры на основе OKLCH. Работает полностью в вашем браузере.

Color Picker & Converter — TL;DR

Выбирайте визуально или вставьте любое значение — HEX, RGB, HSL, OKLCH и OKLAB остаются синхронизированными. Включает проверку контраста WCAG 2.2 и генератор палитры на основе OKLCH. Работает полностью в вашем браузере.

Вставьте hex-значение (например, #ff5722) в поле HEX — строка RGB обновится мгновенно. Аналогично, вставьте rgb(255 87 34) в поле RGB, и HEX, HSL, OKLCH и OKLAB синхронизируются. Конвертация двусторонняя между всеми поддерживаемыми форматами.

OKLCH — это цветовое пространство из CSS Color Module Level 4, использующее перцептивную светлоту (L), хрому (C) и оттенок (h) — как HSL, но перцептивно однородное. Два цвета OKLCH с одинаковым L выглядят одинаково яркими даже при разных оттенках. Это делает дизайн-токены, генерируемые палитры и доступные шкалы цвета гораздо более предсказуемыми, чем HSL. Все актуальные браузеры (Chrome 111+, Safari 15.4+, Firefox 113+) его поддерживают.

Значения цветов никогда не покидают ваше устройство. Откройте DevTools → Network и увидите ноль исходящих запросов во время конвертации, выбора, генерации палитры или проверки контраста.

HEX
RGB
HSL
OKLCH
OKLAB
По имени

Палитра

Контраст WCAG 2.2

Текст
Фон
—
Предпросмотр
Образец крупного заголовка
Образец основного текста — съешь же ещё этих мягких французских булок да выпей чаю.

Создано для реальных задач

От дизайн-систем до аудита доступности — каждый формат и проверка, которые вам нужны, в одном месте.

Шесть цветовых пространств

Двусторонняя конвертация между HEX (3 / 4 / 6 / 8 знаков), RGB(A), HSL(A), OKLCH, OKLAB и именованными цветами CSS. Выходные строки соответствуют синтаксису CSS Color Module Level 4 — вставляйте их прямо в свои стили.

Проверка контраста WCAG 2.2

Узнайте коэффициент контраста между любыми двумя цветами с метками pass/fail в один клик для AA (4.5 : 1) и AAA (7 : 1), для обычного и крупного текста. Расчёт соответствует эталону W3C: линеаризация sRGB, относительная яркость, затем (L1+0.05)/(L2+0.05).

EyeDropper — берите любой пиксель

Нажмите на пипетку, чтобы взять любой цвет с экрана — макеты, скриншоты, фотографии, даже другие вкладки браузера. Использует нативный EyeDropper API в браузерах на Chromium.

Палитра на основе OKLCH

Генерируйте 9 ступеней светлых и тёмных оттенков плюс комплементарные, триадные и аналоговые гармонии — рассчитанные в OKLCH, поэтому каждая ступень перцептивно равномерна (в отличие от HSL, где яркость скачет).

Конфиденциальность по умолчанию

Каждая конвертация выполняется на JavaScript на вашем устройстве. Ничего не загружается, не логируется и не отправляется третьим сторонам — откройте DevTools → Network, чтобы убедиться самостоятельно.

Создано для скорости

Чистый JavaScript, без рантайма фреймворка. Холодная загрузка — менее 50 КБ в gzip; конвертации и генерация палитры завершаются менее чем за миллисекунду на пятилетнем ноутбуке.

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

Четыре способа начать, все форматы синхронизированы.

  1. 1

    Выбирайте визуально

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

  2. 2

    Вставьте любое значение

    Вставьте HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) или даже именованный цвет CSS (tomato) в соответствующее поле — пипетка и другие форматы синхронизируются.

  3. 3

    Возьмите цвет пипеткой

    Нажмите кнопку пипетки, чтобы захватить любой пиксель на экране — другую вкладку, скриншот, фотографию, иконку. Использует нативный EyeDropper API в Chrome, Edge и Opera.

  4. 4

    Скопируйте или проверьте контраст

    Нажмите иконку копирования рядом с любым форматом, чтобы поместить его в буфер обмена. Или прокрутите до раздела контраста WCAG 2.2, чтобы проверить, проходит ли ваша комбинация переднего плана / фона по AA или AAA для обычного и крупного текста.

Создано для дизайнеров, разработчиков и аудиторов доступности

инструмент для работы с цветом, который подходит для четырёх частых сценариев.

Создание токенов в дизайн-системе

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

Аудит доступности WCAG

Подставляйте пары переднего плана / фона и считывайте коэффициент контраста плюс метки AA / AAA. Ловите неудачные сочетания до релиза — соответствует обязательным W3C порогам 4.5 : 1 для обычного и 7 : 1 для усиленного.

Конвертация CSS на фронтенде

Есть HEX из макета дизайнера, но нужен HSL для конфига Tailwind или OKLCH для современных стилей? Вставьте один раз, скопируйте в любом формате. Выходные строки — корректный синтаксис CSS Color Module Level 4.

Подбор палитры

Выберите базовый цвет и сразу увидите девять перцептивно равномерных светлых и тёмных оттенков плюс комплементарные, триадные и аналоговые гармонии — построенные в OKLCH, поэтому каждая ступень выглядит одинаково яркой.

100% приватно — работает в вашем браузере

Значения цветов никогда не покидают ваше устройство. Откройте DevTools → Network и увидите ноль исходящих запросов во время конвертации, выбора, генерации палитры или проверки контраста.

  • Каждая конвертация (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) выполняется как JavaScript на вашей машине — формулы видны в исходном коде страницы.
  • EyeDropper API возвращает только те цвета, на которые вы явно нажали; браузер сам управляет разрешениями и никогда не позволяет странице видеть произвольные пиксели.
  • Никаких логинов, никакой телеметрии по значениям цвета, никакого стороннего цветового API. Сайт совместим с GDPR из коробки.

Связанные руководства

Подобранные вручную руководства для дизайнеров, разработчиков и команд доступности.

Частые вопросы

Как преобразовать HEX в RGB?

Вставьте hex-значение (например, #ff5722) в поле HEX — строка RGB обновится мгновенно. Аналогично, вставьте rgb(255 87 34) в поле RGB, и HEX, HSL, OKLCH и OKLAB синхронизируются. Конвертация двусторонняя между всеми поддерживаемыми форматами.

Что такое OKLCH и зачем его использовать?

OKLCH — это цветовое пространство из CSS Color Module Level 4, использующее перцептивную светлоту (L), хрому (C) и оттенок (h) — как HSL, но перцептивно однородное. Два цвета OKLCH с одинаковым L выглядят одинаково яркими даже при разных оттенках. Это делает дизайн-токены, генерируемые палитры и доступные шкалы цвета гораздо более предсказуемыми, чем HSL. Все актуальные браузеры (Chrome 111+, Safari 15.4+, Firefox 113+) его поддерживают.

Можно ли доверять результату проверки контраста WCAG?

Да. Мы используем алгоритм из WCAG 2.2 §1.4.3: линеаризуем каждый канал sRGB, вычисляем относительную яркость (0.2126·R + 0.7152·G + 0.0722·B), затем (L_lighter + 0.05) / (L_darker + 0.05). AA проходит при 4.5 : 1 для обычного текста и 3 : 1 для крупного (18 pt+ или 14 pt+ жирный). AAA проходит при 7 : 1 и 4.5 : 1 соответственно.

Можно ли брать цвета из изображений или других приложений?

Да — нажмите кнопку Eyedropper, чтобы запустить встроенный EyeDropper API браузера. Вы можете взять любой пиксель в любом месте экрана: другую вкладку браузера, макет в Figma, кадр видео, даже скриншот. Сейчас поддерживается в Chrome, Edge и Opera; в Firefox и Safari происходит мягкий откат (кнопка отключена).

Что-нибудь отправляется на ваш сервер?

Нет. Пипетка, все конвертации, генератор палитры и проверка контраста — всё работает в вашем браузере. Никакие значения цвета, образцы изображений или текст не передаются. Откройте DevTools → Network и убедитесь, что во время использования нет ни одного исходящего запроса.