Конвертер цветов HEX, RGB и HSL

HEX, RGB и HSL описывают один и тот же цвет разными способами. Дизайнер может передать #2a6fb3, а компоненту в CSS нужна строка rgb() или hsl(). Введите HEX из шести цифр или rgb(r, g, b), чтобы получить все три представления. Конвертер сначала переводит компоненты в диапазон 0–255, затем рассчитывает оттенок, насыщенность и светлоту. Округление HSL до целых процентов удобно для ручной настройки, но обратное преобразование может дать соседнее RGB-значение из-за потери точности.

При работе над дизайн-системой храните исходный цвет как одну переменную и создавайте производные представления программно, чтобы не расходились карточки, кнопки и состояния. HSL полезен для осмысленного изменения светлоты и насыщенности, но простое увеличение светлоты не гарантирует читаемого контраста. После выбора пары «текст — фон» проверьте её отдельным контраст-чекером. На реальном экране цвет зависит от соседних элементов, системной темы, профиля дисплея и прозрачности слоя.

Введите цвет в формате #RRGGBB или rgb(r,g,b). Результат покажет эквиваленты.

Начните с кнопки «Вставить пример», чтобы увидеть ожидаемый формат ввода. Затем замените демонстрационные значения своими данными в полях «Исходные данные». Нажмите «Получить результат». Если формат неверный, инструмент покажет ошибку на русском языке; исправьте исходные данные и повторите действие.

Готовый результат можно скопировать одной кнопкой или скачать в файл color-values.txt. Проверьте итог перед публикацией на рабочем сайте: инструмент видит только переданные ему данные и не знает особенностей вашего проекта. Для больших выгрузок удобно сначала обработать небольшой фрагмент и убедиться, что структура результата подходит дальнейшему процессу.

#ffffff преобразуется в rgb(255, 255, 255) и hsl(0, 0%, 100%).

#2a6fb3

Пример показывает форму исходных данных. Результат создаётся только после запуска виджета, поэтому вы можете изменить пример и сразу увидеть, как это влияет на вывод. Если вы работаете с клиентским сайтом, используйте обезличенный образец для первой проверки, затем переходите к полному файлу.

Прозрачность и широкие цветовые пространства в первой версии не поддерживаются.

Технически корректный результат ещё не означает, что он подходит бизнес-логике сайта. Например, URL может быть синтаксически верным, но вести на удалённую страницу; XML может быть хорошо сформированным, но не соответствовать настройкам конкретной площадки. После автоматической проверки откройте итог в целевой системе или браузере и сравните его с ожидаемым поведением.

Если инструмент сообщает об ошибке, начните с названного поля или строки. При обработке файлов проверьте кодировку, переносы строк, кавычки и спецсимволы. Они часто попадают в данные при экспорте из Excel, CMS или интеграции и могут менять смысл результата.

Инструмент поддерживает непрозрачные цвета из распространённого пространства sRGB. Альфа-канал, lab(), lch() и широкие цветовые пространства здесь не обрабатываются. Если исходный дизайн использует прозрачность, сначала определите итоговый цвет на конкретном фоне: одинаковый rgba может выглядеть совершенно по-разному поверх белого и тёмного блока. При копировании значения в CSS убедитесь, что браузер не переопределяет его более специфичным селектором или темой пользователя.

Для повторяющихся задач сохраните входной пример и ожидаемый результат как проверочный сценарий. После обновления сайта или формата данных прогоните его снова: небольшое изменение шаблона экспорта иногда меняет поведение без явной ошибки. Если результат используется в производственной системе, проверьте не только синтаксис, но и последствия на нескольких реальных записях. При публикации конфигурации или метатегов сравните исходный HTML и ответ сервера с тем, что вы видите в форме.

Если макет приходит из Figma с HEX-значением, сохраните его как исходный токен дизайна. Конвертер поможет получить RGB для старого API или HSL для тонкой настройки светлоты, но в коде лучше не хранить три независимых копии одного цвета. При изменении бренда они могут разойтись. Проверьте результат на нейтральном фоне и рядом с соседними цветами палитры. Одинаковый HEX может казаться разным рядом с тёплым и холодным оттенком, поэтому математическая эквивалентность представлений не заменяет визуальную проверку интерфейса.

Для плавного состояния hover можно менять светлоту HSL, но это не гарантирует доступность текста и иконки. После выбора нового оттенка воспользуйтесь проверкой контраста, затем посмотрите кнопку в нормальном, наведённом и отключённом состоянии. Если сайт поддерживает светлую и тёмную темы, запишите парные токены для каждой, а не инвертируйте один цвет автоматически. При передаче результата разработчику укажите, где именно цвет применяется: текст, фон, граница или декоративный элемент. Контекст определяет, какой вариант записи удобнее.

Сохраните исходный пример и результат рядом с задачей, чтобы при следующем обновлении можно было повторить проверку. Откройте итоговый файл в целевой системе и сравните не только отсутствие ошибки, но и число обработанных записей, конечные адреса, отображение кириллицы и поведение на мобильном экране, если результат используется в интерфейсе. Для конфигурации сервера сначала примените изменения на тестовом окружении и выполните запрос к реальному URL. Для данных каталога выберите несколько контрольных SKU с разными ценами и остатками. Если расхождение найдено, исправляйте источник данных или шаблон генерации, а не только один скачанный файл. Так следующая автоматическая выгрузка не вернёт проблему.

Поля этого инструмента обрабатываются в вашем браузере. Содержимое не отправляется на сервер Pugofka, а локальный файл читается только после вашего выбора. Для XML определяется кодировка из объявления или BOM; при отсутствии подсказки сначала пробуется UTF-8, затем Windows-1251. Виджет скрыт от записи содержимого в Вебвизоре; в Яндекс Метрику передаются slug инструмента и тип действия — открытие, первое взаимодействие, запуск, получение результата, копирование или скачивание.

При копировании данные попадают в системный буфер обмена устройства, где их могут видеть другие приложения с соответствующим доступом. Если исходник содержит секреты или персональные данные, очистите поле после работы. Скачанный файл остаётся на устройстве, в выбранной браузером папке загрузок.

Используйте результат как рабочий черновик: вставьте его в конфигурацию, страницу или документ и повторно проверьте там, где он будет применяться. Если вы меняете индексируемые страницы, обновите связанные ссылки и карту сайта. Для миграции URL дополнительно запустите сетевую проверку редиректов, чтобы увидеть фактические HTTP-ответы после публикации.

Если задача связана с каталогом, импортом или поддержкой интернет-магазина, команда Pugofka может помочь встроить такую проверку в регулярный обмен данными и исправить источник ошибок. Одноразовая онлайн-утилита полезна для диагностики, а постоянный поток данных обычно требует автоматической проверки на стороне проекта.