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

Возможности

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Визуальная палитра

Живой предпросмотр

Вывод в виде CSS-переменных

Как использовать

1. Выберите цвет (или кликните по рабочей области, вставьте HEX, используйте пипетку или нажмите Пробел для случайного).

2. Все форматы — HEX, RGB, HSL, OKLCH — конвертируются в обе стороны в реальном времени.

3. Копируйте одно значение или весь блок CSS-переменных; переключайте фон, чтобы оценить цвет на белом, сером или тёмном.

Об этом инструменте

Дизайнеры выбирают цвета на глаз, CSS ждёт строку, а каждый инструмент говорит на своём формате. Этот конвертер синхронизирует один цвет в HEX, RGB, HSL и OKLCH: измените любое поле или воспользуйтесь пипеткой-палитрой — остальные значения обновятся мгновенно. HEX и RGB описывают красный, зелёный и синий каналы; HSL — тон, насыщенность и светлоту, которые проще подстраивать вручную; OKLCH — более новый перцептивный формат из CSS Color Level 4, в котором равные шаги светлоты выглядят для глаза равными, поэтому он лучше подходит для согласованных палитр. Можно скопировать одно значение или готовый блок пользовательских CSS-свойств и заранее посмотреть цвет на белом, сером или тёмном фоне.

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

Какой формат использовать в CSS?

HEX и rgb() работают везде и хорошо подходят для фиксированных цветов. hsl() удобен, когда нужно вручную подправить светлоту или насыщенность. oklch() поддерживается современными браузерами и лучше всего подходит для системных палитр, потому что его светлота перцептивно равномерна.

Почему цвета HSL со светлотой 50% так различаются по яркости?

HSL — это математическая перестановка RGB, а не модель человеческого зрения, поэтому жёлтый при 50% кажется гораздо ярче синего при 50%. Светлота в OKLCH рассчитана так, чтобы соответствовать воспринимаемой яркости, поэтому этот формат всё чаще используют в дизайн-системах.

Почему при обратном преобразовании значение может немного измениться?

HEX и RGB хранят целые числа от 0 до 255, а HSL и OKLCH используют дробные значения. Округление при пересчёте может сдвинуть канал на одну ступень, что глазом незаметно.

Можно ли взять цвет из другого места на экране?

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

Что содержит блок CSS-переменных?

В нём один и тот же цвет перечислен в виде пользовательских свойств в нескольких форматах, например --color-hex, --color-rgb, --color-hsl и --color-oklch, чтобы вставить их в :root и ссылаться на тот формат, который нужен вашему коду.

Возможности

Как использовать

Об этом инструменте

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

Похожие инструменты