Конвертер цветовых кодов
Конвертация между RGB, HEX, HSL, HSV и CMYK с палитрой цветов и проверкой контраста
Палитра цветов
Предпросмотр
Форматы цвета
Цветовая палитра
Проверка контраста
Пример текста
Это пример текста для проверки читаемости.
Об этом инструменте
Конвертер цветовых кодов — это бесплатный инструмент для дизайнеров и разработчиков, который переводит между RGB, HEX, HSL, HSV и CMYK. Вы интуитивно выбираете цвет, автоматически создаёте палитры дополнительных и аналогичных цветов и проверяете коэффициент контраста WCAG между текстом и фоном. Полезен для дизайна сайтов и приложений, управления фирменными цветами и проверки доступности.
Как пользоваться
- 1 Выберите цвет с помощью палитры или введите значение HEX напрямую.
- 2 Значения RGB, HSL, HSV и CMYK отображаются одновременно.
- 3 Просмотрите автоматически созданную палитру дополнительных и аналогичных цветов.
- 4 Используйте проверку контраста, чтобы убедиться, что текст читается на фоне.
Как это работает
RGB смешивает красный, зелёный и синий свет, каждый от 0 до 255, и является основой цвета на экране. HEX — это тот же RGB, записанный как две шестнадцатеричные цифры на канал, поэтому #FF8800 означает красный 255, зелёный 136, синий 0. HSL описывает цвет через тон (Hue, 0-360 градусов), насыщенность и светлоту, что ближе к человеческому восприятию и удобно для точной настройки. HSV заменяет светлоту на значение (яркость). CMYK использует количества голубой, пурпурной, жёлтой и чёрной краски и предназначен для печати. Коэффициент контраста — это отношение относительной яркости двух цветов; WCAG рекомендует не менее 4,5:1 для обычного текста на уровне AA и 7:1 на AAA.
Частые вопросы
Чем отличаются HEX и RGB?
Они несут одинаковую информацию о цвете. RGB перечисляет красный, зелёный и синий десятичными числами 0-255, а HEX упаковывает их в две шестнадцатеричные цифры каждый. #FF0000 и rgb(255,0,0) — один и тот же красный.
Что означает уровень контраста AA по WCAG?
Это стандарт читаемости: текст обычного размера требует коэффициента контраста не менее 4,5:1 к фону, а крупный текст допускается при 3:1.
Для чего нужен HSL?
Он позволяет менять насыщенность или светлоту, сохраняя тон, поэтому удобно создавать вариации одного цвета и оттенки для состояния наведения.
Почему цвета различаются между CMYK и RGB?
RGB — это аддитивное смешение света, а CMYK — субтрактивное смешение краски с разными цветовыми охватами. Яркие на экране цвета при печати могут выглядеть тусклее.
Что такое дополнительные и аналогичные цвета?
Дополнительные находятся на противоположной стороне цветового круга и дают сильный контраст, аналогичные — соседние и создают гармонию. Инструмент рассчитывает оба автоматически.
Связанные инструменты и применение
Чтобы понять, как устроен HEX, поможет конвертер систем счисления. Для размеров дизайна см. конвертер длины, а для веб-вёрстки — переводы px, rem и em.