Назад к инструментам

Конвертер цветов и генератор палитр

Перевод между HEX, RGB, HSL и OKLCH, проверка контраста по WCAG и создание палитр

Выбор цвета

Формат корректен
Готовые цвета

Этот цвет

#0D5A6B

darkslategrey

Белый текст читается на этом цвете лучше всего: 7.80:1

Другие цветовые пространства
Считается в вашем браузере

Сборка

Сборка

Белый текст проходит AA начиная с 500; чёрный — до 400.

#0d5a6b
Куда
Запись
@theme {
  --color-darkslategrey-50: #f3fafc;
  --color-darkslategrey-100: #dbf0f5;
  --color-darkslategrey-200: #aedfea;
  --color-darkslategrey-300: #65d3ec;
  --color-darkslategrey-400: #1ab3d5;
  --color-darkslategrey-500: #0d5a6b;
  --color-darkslategrey-600: #0c505f;
  --color-darkslategrey-700: #0b4856;
  --color-darkslategrey-800: #05404d;
  --color-darkslategrey-900: #04343e;
  --color-darkslategrey-950: #032830;
}

Контраст (WCAG)

На белом7.80:1

Aa Пример текста

Aa Пример текста

  • AA (4.5:1)
  • AAA (7:1)
  • AA крупный (3:1)
  • Иконка/граница (3:1)
На чёрном2.69:1

Aa Пример текста

Aa Пример текста

  • AA (4.5:1)
  • AAA (7:1)
  • AA крупный (3:1)
  • Иконка/граница (3:1)

Крупным считается текст от 24px обычного начертания или от 18.66px полужирного.

Сравнить с другим фоном
На вашем фоне2.29:1

Aa Пример текста

Aa Пример текста

  • AA (4.5:1)
  • AAA (7:1)
  • AA крупный (3:1)
  • Иконка/граница (3:1)

Форматы цвета — справочник

Каждый формат записывает один и тот же цвет по-своему. В таблице ниже один цвет — #0d5a6b — во всех семи записях, чтобы строки можно было сравнить напрямую.

ФорматСинтаксис CSSПримерКогда использовать
HEX#RRGGBB[AA]#0d5a6bСамая распространённая запись в вебе. Каждый канал — две шестнадцатеричные цифры; восьмизначная форма несёт прозрачность в последней паре. Коротко и удобно копировать, но по цифрам трудно представить цвет.
RGBrgb(R G B [/ A])rgb(13 90 107)Запись, ближайшая к тому, как работает экран: сколько красного, зелёного и синего света, от 0 до 255. Обычно к ней обращаются, когда считают цвета в JavaScript. Современный синтаксис разделяет каналы пробелами, а прозрачность ставит после косой черты.
HSLhsl(H S% L% [/ A])hsl(191 78% 24%)Тон (0–360°), насыщенность и светлота. Совпадает с тем, как люди думают о цвете, поэтому удобна для ручной подстройки: поднимаете светлоту — цвет выцветает, опускаете — густеет. Недостаток в том, что одна и та же светлота на разных тонах выглядит по-разному.
OKLCHoklch(L C H [/ A])oklch(0.433 0.073 217)Стандарт 2026 года для дизайн-систем. В отличие от HSL, светлота здесь перцептивно ровная: жёлтый и синий с одинаковым L выглядят одинаково яркими. Tailwind v4 описывает свою палитру именно в этой записи, поэтому она правильный выбор для экспорта токенов.
OKLaboklab(L a b [/ A])oklab(0.433 -0.058 -0.045)Прямоугольные координаты OKLCH: L — светлота, a и b — оси зелёный↔красный и синий↔жёлтый. Используется, чтобы измерить, насколько два цвета различаются на глаз — именно в этом пространстве инструмент ищет ближайшее название цвета.
LCHlch(L% C H [/ A])lch(35% 22 227)Цилиндрическая форма CIE Lab и поколение до OKLCH: идея та же, но светлота не совсем ровная на некоторых тонах. Всё ещё встречается в старых дизайн-системах и в полиграфии.
Lablab(L% a b [/ A])lab(35% -15 -16)Пространство CIE Lab, стандартизованное в 1976 году и не зависящее от устройства — одно и то же значение означает один и тот же цвет на любом экране. Остаётся рабочим пространством для сравнения цветов и систем управления цветом.

Перевод из hex можно сделать вручную: в #0d5a6b пара 0d — это 0×16 + 13 = 13, 5a — 5×16 + 10 = 90, а 6b — 6×16 + 11 = 107. Получается rgb(13 90 107).

Часто задаваемые вопросы

Какие форматы цвета поддерживаются?

HEX (3, 4, 6 и 8 цифр), RGB, HSL, Lab, LCH, OKLab, OKLCH и названия цветов CSS. Читается и современный синтаксис CSS Color 4 — rgb(255 0 0 / 50%) или hsl(200deg 50% 40%). CMYK не поддерживается: он зависит от печатного профиля, и точно посчитать его в браузере нельзя.

Что показывает проверка контраста WCAG?

Она измеряет выбранный цвет относительно белого и чёрного. WCAG 2.1 требует 4.5:1 (AA) и 7:1 (AAA) для основного текста, 3:1 для крупного текста и 3:1 для иконок и границ. Полупрозрачный цвет сначала накладывается на каждый фон, поэтому число описывает то, что люди действительно видят. Если AA не проходит, инструмент предлагает ближайшую подходящую ступень вашей шкалы.

Отправляются ли мои цвета на сервер?

Нет. Все преобразования выполняются в браузере. История и избранное хранятся только в localStorage на вашем устройстве, и вы можете очистить их в любой момент.

Как перенести результат в проект?

Экспортируйте шкалу как CSS-переменные, блок Tailwind v4 @theme или переменные SCSS, в записи HEX или OKLCH. Имя токена выбираете вы, а фрагмент показывается целиком перед копированием. К градиентам прилагается готовый CSS и класс Tailwind.