Конвертер цветовых форматов

Введите цвет в любом синтаксисе CSS и увидьте его как HEX, RGB, HSL, HWB, LAB, LCH, OKLCH и OKLAB сразу, с живым образцом. Всё преобразуется в вашем браузере.

Конвертер цветовых форматов разбирает и преобразует каждый цвет локально в вашем браузере. Значения, которые вы вводите или вставляете, никогда не покидают ваше устройство, и ничего не загружается в ArrayKit.

Открыть конвертер CSS-цветов

Об инструменте Конвертер цветовых форматов

Конвертер цветовых форматов берёт один цвет, записанный в любом синтаксисе CSS — hex вроде #7c3aed, значение rgb() или hsl(), hwb(), lab(), lch(), oklch(), oklab() или именованный цвет вроде rebeccapurple, — и показывает его одновременно во всех остальных нотациях. Вы получаете HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH и OKLAB плюс ближайший именованный CSS-цвет и живой образец, каждый готов к копированию. Создан для дизайнеров и фронтенд-разработчиков, переносящих палитру в современные пространства вроде OKLCH, сопоставляющих цвет между инструментом дизайна и таблицей стилей или проверяющих, как значение выглядит в перцептивно равномерном пространстве. Альфа сохраняется от начала до конца. Каждый разбор и преобразование выполняются локально в вашем браузере, поэтому вводимые цвета никогда не покидают ваше устройство.

Возможности

Как использовать Конвертер цветовых форматов

  1. Введите или вставьте цвет в поле в любом формате CSS
  2. Посмотрите живой образец, чтобы убедиться, что ввели нужный цвет
  3. Скопируйте нужную нотацию — HEX, RGB, HSL, HWB, LAB, LCH, OKLCH или OKLAB
  4. Возьмите ближайший именованный цвет, когда нужна читаемая метка

Пример

Ввод

#7c3aed

Результат

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

Один hex разворачивается во все нотации CSS-цвета сразу.

Частые ошибки и устранение неполадок

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

Какие цветовые форматы выводит этот конвертер?
Он показывает HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH и OKLAB одновременно, плюс ближайший именованный CSS-цвет, для любого введённого цвета.
Что такое OKLCH и зачем в него преобразовывать?
OKLCH — перцептивно равномерное цветовое пространство, где светлота, насыщенность и оттенок ведут себя предсказуемо. Дизайнеры переносят в него палитры, потому что интерполяция и осветление цветов в OKLCH выглядят ровнее, чем в HSL или RGB.
Как выбирается ближайший именованный цвет?
Ваш цвет сравнивается со 148 именованными CSS-цветами по расстоянию в RGB, и возвращается ближайшее совпадение. Когда ничего действительно близкого нет, инструмент так и говорит, а не предлагает вводящее в заблуждение имя.
Сохраняет ли конвертер альфа-канал?
Да. Полупрозрачный цвет показывается как HEXA (#rrggbbaa), как rgba()/hsla() и с альфа-хвостом `/ 0.5` в HWB, LAB, LCH, OKLCH и OKLAB. Непрозрачные цвета опускают альфу полностью.
Можно ли вставить значение oklch() или lab() в качестве ввода?
Да. Ввод принимает любой синтаксис CSS-цвета, включая oklch(), oklab(), lab(), lch() и hwb(), и преобразует его во все остальные форматы так же, как обрабатывает hex или rgb().
Отправляются ли вводимые мной цвета на сервер?
Нет. Разбор и каждое преобразование выполняются локально в вашем браузере, поэтому цвета, которые вы вводите или вставляете, никогда не покидают ваше устройство и не загружаются в ArrayKit.

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

Все инструменты ArrayKit