Softonic

Конвертер цветовых кодов

Шаг 1 / 2
Далее

Вставьте цвет в формате HEX (#ff6600 или #f60), rgb(255, 102, 0), через запятую 255, 102, 0 или hsl(24, 100%, 50%), и конвертер мгновенно вернёт его в двух других форматах, с живым образцом цвета и копированием каждого формата в один клик.

Как работает преобразование цветовых кодов

  1. 1

    Введите цвет в поддерживаемом формате

    HEX (#abc, #abcdef), rgb(r, g, b), через запятую r, g, b или hsl(h, s%, l%).

  2. 2

    Разбор во внутреннее представление

    Инструмент внутренне преобразует значение в RGB, а затем выводит из него эквиваленты HEX и HSL.

  3. 3

    Отображение всех форматов

    Соответствующие строки HEX, RGB и HSL показываются рядом друг с другом.

  4. 4

    Живой образец цвета

    Показывает итоговый цвет с первого взгляда, чтобы вы подтвердили преобразование перед копированием.

Поддерживаемые форматы

Формат Пример Применение
HEX 3 #F66 Сокращение; только для цветов с повторяющимися цифрами
HEX 6 #FF6B6B Стандарт для CSS и графического дизайна
RGB rgb(255, 107, 107) CSS, JS, программы для дизайна
Через запятую 255, 107, 107 То же, что RGB, без синтаксиса функции
HSL hsl(0, 100%, 71%) Проще рассуждать о тоне/насыщенности/светлоте

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

  • HEX для статичного CSS и передачи макетов.
  • RGB, когда вы передаёте каналы в JavaScript или программы для дизайна.
  • HSL при настройке яркости или насыщенности, такая модель понятнее, чем RGB.

Другие форматы, такие как HSV, CMYK, LAB, LCH и OKLCH, существуют в дизайнерских инструментах. Они описывают один и тот же цвет по-разному, но этот конвертер сосредоточен на трёх основных веб-форматах выше.

Точность

  • Преобразования между HEX, RGB и HSL точны: HEX и RGB это одна и та же цветовая модель, а HSL выводится из RGB по стандартной формуле.
  • Значения HSL округляются до целых чисел, поэтому при преобразовании туда и обратно последняя цифра может сдвинуться. Видимый цвет при этом одинаков; используйте HEX, когда нужна побитово точная копия.

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

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

Нет, конвертер принимает только непрозрачные цвета: HEX из 3 или 6 цифр, rgb() и hsl() без альфа-канала. Используйте rgba() или 8-значный HEX напрямую в своём CSS.

Нет, конвертер принимает только три числовых формата. Сначала переведите именованный цвет в HEX с помощью палитры или онлайн-справочника.

HSL показывается с целыми значениями тона, насыщенности и светлоты, поэтому при преобразовании туда и обратно значение может сдвинуться на один пункт. Видимый цвет при этом одинаков; используйте HEX, когда нужна точная копия.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.