MyDevTools
RU

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

Конвертация цветов между HEX, RGB, HSL и CMYK, палитра из 9 оттенков и проверка контраста двух цветов по WCAG прямо в браузере.

Введённые данные и файлы остаются в браузере

Цвет

Примеры: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Конвертированные форматы

Проверка контраста

Пример текста16 px

Пример текста24 px

Крупный текст — от 24 px обычного начертания или примерно от 18,67 px жирного.

Коэффициент контраста—

    Светлые и тёмные варианты

    Смешение с чёрным (тёмные) и белым (светлые) в линейном sRGB. Клик по образцу копирует его HEX.

    На этой странице

    Вставьте цвет CSS в любой распространённой записи — и получите его в форматах HEX, RGB, HSL и CMYK с кнопками копирования. Здесь же строится палитра светлых и тёмных оттенков и проверяется контраст текста и фона по WCAG.

    Подробное описание функциональности

    Формат определяется автоматически: #3b82f6, короткая запись #38f (решётка необязательна), rgb(59, 130, 246) или rgba(…) с каналами 0–255 или в процентах, hsl(217, 91%, 60%) с необязательным deg и cmyk(76%, 47%, 0%, 4%). Поддерживается и CSS-синтаксис через пробел, например rgb(59 130 246 / 50%); альфа-канал принимается, но игнорируется, потому что у результатов нет прозрачности. Некорректные значения и выход за диапазон показываются ошибкой, а не угадываются. Цвет можно выбрать и системной пипеткой.

    Палитра смешивает текущий цвет с чёрным (тёмные варианты) и белым (светлые) на 20, 40, 60 и 80% в линейном пространстве sRGB — девять образцов, исходный цвет в центре; клик по образцу копирует его HEX-код. Проверка контраста принимает цвет текста и цвет фона и показывает коэффициент и четыре порога WCAG 2.x: AA 4.5:1 и AAA 7:1 для обычного текста, AA 3:1 и AAA 4.5:1 для крупного.

    Все преобразования — обычные формулы на JavaScript прямо на странице, ничего не загружается на сервер. CMYK считается по простой формуле без ICC-профиля: годится для ориентира, но не для допечатной подготовки. Значения HSL и CMYK округляются до целых, поэтому обратное преобразование может отличаться от исходного на единицу.

    Практические примеры

    Из HEX во все форматы: #3b82f6 → rgb(59, 130, 246), hsl(217, 91%, 60%) и cmyk(76%, 47%, 0%, 4%).

    Из HSL в HEX: hsl(0, 100%, 50%) превращается в #FF0000 — как и cmyk(0%, 100%, 100%, 0%).

    Проверка контраста: серый текст #777777 на белом фоне #ffffff даёт 4.48:1 — проходит AA для крупного текста (3:1), но не проходит AA для обычного (4.5:1).

    Пара по умолчанию: предустановленные #1e3a8a на #ffffff дают 10.36:1 и проходят все четыре уровня WCAG.

    Как использовать этот инструмент

    1. Задайте цвет

      Введите или вставьте значение в поле «Ручной ввод» (HEX, rgb(), hsl() или cmyk()) и нажмите «Конвертировать» или Enter — либо выберите цвет в «Выбор цвета».

    2. Скопируйте нужный формат

      В блоке «Конвертированные форматы» нажмите кнопку копирования рядом с HEX, RGB, HSL или CMYK.

    3. Скопируйте светлый или тёмный вариант

      В блоке «Светлые и тёмные варианты» кликните по образцу, чтобы скопировать его HEX-код.

    4. Проверьте контраст

      В блоке «Проверка контраста» задайте «Цвет текста» и «Цвет фона» и посмотрите коэффициент и результаты AA/AAA.

    Советы и лучшие практики

    • Решётка необязательна, короткая запись работает: 38f читается как #3388FF.
    • Тон можно писать с deg или без; насыщенность и светлота — от 0 до 100.
    • Значения вне диапазона (например, rgb(300, 0, 0)) отклоняются, а не обрезаются молча.
    • Для основного текста ориентируйтесь минимум на 4.5:1; 3:1 достаточно только для крупного текста (24 px или 18.66 px полужирным).
    • Не используйте CMYK отсюда для печати тиража — запросите значения у типографии под её ICC-профиль.