Конвертер цветов (HEX, RGB, HSL)
Конвертируйте цвета между HEX, RGB, HSL и HSV. Вставьте по одному цвету в строке, включая 3-значный HEX, значения rgb() и hsl(), и нажмите на любой образец
Конвертируйте цвета между HEX, RGB, HSL и HSV в обоих направлениях. Вставьте по одному цвету в строке — включая сокращённый 3-значный HEX, значения rgb() и hsl() — и сразу получите все представления, а также образец, по клику на который копируется код HEX.
Пригодится, когда графический редактор выдаёт HSL, а доставшийся вам CSS использует HEX; когда нужна тройка RGB для canvas или файла ресурсов Android; когда вы сверяете фирменную палитру и хотите увидеть, как оттенки соотносятся друг с другом. Преобразование идёт по стандартным формулам CSS, а значения alpha сохраняются, если вы их указали.
Как конвертировать цвета между HEX, RGB, HSL и HSV
Введите по одному цвету в строке в любом поддерживаемом формате
Посмотрите преобразованные значения HEX, RGB, HSL и HSV
Нажмите на образец, чтобы скопировать его код HEX
Частые вопросы
Какие форматы принимаются на входе?
Принимаются HEX (#1a2b3c или #abc), rgb(26, 43, 60), rgba(...), hsl(210, 40%, 17%) и hsla(...). Вводите по одному значению в строке, с названием функции в нижнем регистре или без него.
Можно ли конвертировать несколько цветов сразу?
Да. Вставьте целую палитру — по одному цвету в строке — и каждая строка будет преобразована независимо.
Как скопировать результат?
Нажмите на любой образец цвета, и его значение HEX скопируется в буфер обмена; текстовый вывод тоже можно выделить и скопировать, как любой другой текст.
Совпадает ли результат с функциями цвета CSS?
Да, используются стандартные формулы sRGB, а значения HSL/HSV округляются для читаемости. Округление может сдвинуть канал на единицу, что на практике незаметно.
Учитывается ли прозрачность?
Значения alpha во входных данных rgba() и hsla() сохраняются. В выводе HEX они представлены 8-значным значением с alpha.
Что-нибудь отправляется на сервер?
Нет. Преобразование — это чистая арифметика, выполняемая в вашем браузере.
Между какими форматами цвета можно конвертировать?
HEX, RGB, HSL и HSV — форматы, которые используют CSS, графические редакторы и код. CMYK — это цветовое пространство для печати, и его нельзя точно вывести из экранных значений, поэтому считайте любую цифру в CMYK грубым ориентиром, а не обязательством.
Что показывает проверка контраста?
Соответствует ли пара из текста и фона минимальным коэффициентам контраста WCAG — 4,5:1 для обычного текста и 3:1 для крупного. Часто именно от этого зависит, пройдёт интерфейс проверку доступности или нет.
Почему один и тот же цвет в другом месте выглядит иначе?
Экраны различаются по охвату цветов, яркости и калибровке. Для интернета безопасно предполагать sRGB, а цвета, заданные за пределами этого диапазона, на обычном мониторе могут быть приведены к чему-то близкому.
Отправляются ли мои данные о цвете куда-нибудь?
Нет, преобразование происходит внутри вашего браузера.
Кратко
| Ввод | текст |
|---|---|
| Несколько файлов | Нет |
| Где работает | В вашем браузере — файлы никуда не загружаются |
| Работает офлайн | Да — после загрузки страницы |
| Цена | Бесплатно, без регистрации, без водяных знаков |
Где конвертации незаметно ломаются
Большинство ошибок конвертации — не про синтаксис, а про смысл. Столбец CSV с почтовыми индексами теряет ведущие нули в тот момент, когда таблица решает, что это число; длинный идентификатор выходит за пределы точности чисел с плавающей запятой; даты меняют смысл в зависимости от того, что идёт первым — день или месяц. Ключи JSON не упорядочены, а массивы упорядочены, и инструмент, сортирующий ключи, ничего не меняет, тогда как сортирующий массивы меняет данные. Unicode — ещё одна ловушка: текст может прийти в UTF-8, в UTF-16 или с BOM, и декодер, который угадает неверно, превращает буквы с диакритикой в «кракозябры». Прежде чем доверять любой конвертации, выборочно проверьте первую и последнюю строку, любое поле с ведущими нулями и любое поле, содержащее кавычки, запятые или переводы строк.
Как выбрать формат данных
JSON — выбор по умолчанию для всего, что возвращает API или читает программа: он естественно работает с вложенными структурами, числами, логическими значениями и null, и его разбирает любой язык. CSV компактнее и открывается прямо в таблице, но в нём нельзя выразить вложенность и нет общего стандарта для разделителя, кавычек и кодировки — именно здесь конвертации и ломаются. XML многословен, но несёт атрибуты, смешанное содержимое и схемы, поэтому до сих пор доминирует в форматах документов и устаревших интеграциях. YAML самый читаемый для конфигурации, но чувствителен к пробелам и удивляет приведением типов («no» превращается в false, версия вроде 1.10 — в 1.1). Выбирайте формат, который предпочитает потребляющий инструмент, а не тот, что выглядит красивее.