nicetool.dev logo

Конвертер цветов

Введите любой цвет CSS (HEX, rgb(), hsl(), oklch(), cmyk() или название цвета).

#3B82F6
Форматы
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

Контраст WCAG

Aa 123

Текст на белом

3.68:1

AAAA крупныйAAA
Aa 123

Текст на чёрном

5.71:1

AAAA крупныйAAA

Оттенки

Нажмите на оттенок, чтобы выбрать его.

Зачем конвертировать форматы цвета?

Дизайнеры и разработчики работают с цветами во многих форматах: HEX в дизайн-инструментах, rgb() и hsl() в CSS, OKLCH в современных дизайн-системах вроде Tailwind CSS v4 и CMYK для печати. Этот инструмент мгновенно переводит между ними.

Возможности

  • • Вывод в HEX, RGB, HSL, HSV, HWB, OKLCH и CMYK
  • • Встроенная пипетка и ползунок непрозрачности
  • • Коэффициент контраста WCAG 2 относительно белого и чёрного
  • • Автоматическая палитра светлых и тёмных оттенков

Мгновенно и локально

Все преобразования вычисляются в браузере без сетевых запросов.

Доступные цвета, без отслеживания.

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

  1. 1

    Введите цвет в любом формате CSS: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) или название вроде tomato. Можно также выбрать цвет пипеткой.

  2. 2

    При необходимости настройте прозрачность. Все форматы обновляются вместе, включая 8-значный HEX и rgba.

  3. 3

    Скопируйте нужный формат: HEX для передачи дизайна, rgb() или hsl() для CSS, OKLCH для современных дизайн-токенов, CMYK как отправную точку для печати.

  4. 4

    Проверьте контраст по WCAG с белым и чёрным текстом и кликните по оттенку в палитре, чтобы посмотреть более светлые или тёмные варианты.

Практические примеры

От макета к коду

Дизайнер присылает #0EA5E9 из Figma. Переведите его в hsl(), чтобы делать состояния hover и active, меняя только светлоту.

Проверка доступности

Основному тексту по WCAG AA нужен контраст не меньше 4,5:1. Проверьте фирменный цвет, прежде чем делать его фоном кнопки с белым текстом.

Построение шкалы цветов

Используйте сгенерированные оттенки как основу палитры от 50 до 900 в Tailwind CSS или вашей дизайн-системе.

Полиграфия

Переведите экранный цвет в CMYK для типографии. Это приближение: точный цвет печати зависит от бумаги и профиля принтера.

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

Чем RGB отличается от HSL?+

Оба описывают одни и те же цвета. RGB смешивает красный, зелёный и синий свет, а HSL использует тон, насыщенность и светлоту, что удобнее для людей, например сделать цвет на 10% светлее.

Зачем нужен OKLCH?+

OKLCH перцептивно равномерен: одинаковые изменения светлоты выглядят одинаково различными, в отличие от HSL. Его поддерживают все современные браузеры, и с ним проще строить согласованные шкалы и тёмные темы.

Какой контраст нужен?+

WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного (около 24 px или 19 px жирным). Уровень AAA повышает требования до 7:1 и 4,5:1.

Значение CMYK точное?+

Нет. Перевод экранного RGB в CMYK без цветового профиля даёт математическое приближение. Для важной брендовой печати закажите цветопробу или используйте Pantone.