Выберите цвет и конвертируйте HEX/RGB/HSL Примеры кода и подсказки по использованию.
Онлайн color picker выбирает цвет и сразу конвертирует его во все популярные форматы: HEX (#ff5500), RGB/RGBA (rgb(255 85 0)), HSL/HSLA, HWB, OKLCH, CMYK. Инструмент поддерживает прозрачность (alpha), eyedropper для захвата цвета с экрана (в Chrome и Edge), цветовой круг, список именованных CSS-цветов (red, coral, rebeccapurple).
Color picker нужен дизайнерам для работы с бренд-гайдлайнами и Figma, верстальщикам для CSS-переменных темы, frontend-разработчикам для Tailwind-конфига и shadcn/ui токенов. Встроенная проверка контрастности по WCAG 2.1 показывает соотношение цветов для accessibility — AA (4.5:1) и AAA (7:1) для нормального текста.
Дополнительно: генерация тёмной темы из светлой, перевод между цветовыми пространствами (sRGB ↔ Display P3), импорт Pantone. Обработка локальная — цвета никуда не отправляются.
Выберите цвет мышью на круге или введите HEX/RGB.
Бесплатный виджет с бэклинком на ваш сайт
Загрузка…
Или нажмите eyedropper и захватите цвет с экрана.
Настройте прозрачность (alpha) при необходимости.
Проверьте контраст с фоном по WCAG.
Скопируйте в нужном формате — CSS, Tailwind, Figma.
Все форматы CSS в одном месте, с alpha и CMYK для печати.
Захват цвета из любой точки экрана через EyeDropper API (Chrome, Edge).
Проверка AA/AAA для текста и UI — прямо на цветовом круге.
CSS-переменные, Tailwind config, shadcn/ui tokens, Figma Styles.
Переключение sRGB и Display P3 — использование широкого цветового охвата современных экранов.
Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)
Все файлы обрабатываются локально в вашем браузере для максимальной безопасности
Сохраняйте результат сразу после обработки
Попробуйте разные настройки для оптимального результата
OKLCH — перцептивно равномерное пространство: изменение L (lightness) одинаково воспринимается человеческим глазом для любого оттенка. В HSL «светлота 50%» у жёлтого и синего выглядит по-разному. OKLCH удобнее для генерации шкал цветов в дизайн-системе.
По WCAG 2.1 — 4.5:1 для обычного текста (уровень AA), 3:1 для крупного (от 18pt), 7:1 для AAA. Для UI-элементов (кнопки, границы) достаточно 3:1.
Figma работает в Display P3 (по умолчанию на macOS), браузер — в sRGB. Если монитор с широким охватом, P3-цвета будут ярче. Укажите в Figma sRGB-режим или используйте CSS `color(display-p3 ...)`.
Да, в Chromium-браузерах (Chrome 95+, Edge) работает EyeDropper API — кнопка «пипетка» даст выбрать пиксель в любом окне. В Firefox/Safari API пока не поддерживается.
В OKLCH уменьшите L (например с 0.7 до 0.3), оставив C и H — получите ту же краску, но темнее. В HSL уменьшите L, но будьте готовы к сдвигу оттенка.
Создайте QR-код из текста, URL или данных