Перейти к контенту
SPCXTools

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

Конвертируйте любой цвет между HEX, RGB, HSL, HSV и CMYK, а также проверяйте его контрастность.

Работает локально — файлы не покидают ваше устройство

Загрузка инструмента…

Как использовать Конвертер цветов

  1. 1Введите или вставьте цвет в любом формате — например, #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) или CSS-имя вроде tomato — либо используйте палитру.
  2. 2Посмотрите значения этого цвета в HEX, RGB, HSL, HSV и CMYK и скопируйте нужный формат.
  3. 3Проверьте коэффициент контрастности с белым и черным фоном, чтобы понять, будет ли читаться текст такого цвета.
  4. 4Нажмите на любой образец на шкале светлых и темных оттенков, чтобы изучить более светлые и темные варианты.

Конвертер цветов во все популярные форматы

Дизайнерам, разработчикам и маркетологам постоянно приходится переносить цвета между разными инструментами: для CSS нужен HEX или HSL, в брендбуке указаны RGB и CMYK, а в графическом редакторе — HSB. Этот конвертер принимает цвет в любом из этих форматов и моментально переводит его во все остальные. Скопировать нужный код можно в один клик. Кроме того, инструмент проверяет контрастность текста и генерирует палитру светлых и темных оттенков.

Возможности

  • Любой формат ввода: HEX (3, 4, 6 или 8 символов), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, обычные тройки чисел и CSS-имена цветов.
  • Все форматы сразу: HEX, RGB, HSL, HSV и CMYK — для каждого есть кнопка копирования.
  • Поддержка прозрачности — альфа-канал сохраняется в форматах HEX8, RGBA и HSLA.
  • Встроенная палитра для визуального выбора цвета.
  • Проверка контрастности WCAG на белом и черном фоне с результатами уровня AA для обычного и крупного текста.
  • Светлые и темные оттенки со светлотой от 10% до 90%; кликните по любому цвету, чтобы выбрать его.

Описание цветовых форматов

  • HEX — #RRGGBB в шестнадцатеричной системе, самый популярный формат в веб-дизайне. Дополнительная четвертая пара символов задает прозрачность.
  • RGB — красный, зеленый и синий цвета со значениями от 0 до 255; именно так экраны физически формируют цвета.
  • HSL — оттенок (положение на цветовом круге), насыщенность и светлота. Легко настраивать вручную: меняйте только светлоту, чтобы получить более светлые или темные версии того же цвета.
  • HSV / HSB — оттенок, насыщенность и яркость (brightness). Используется в большинстве колор-пикеров в графических редакторах.
  • CMYK — процентное соотношение голубой, пурпурной, желтой и ключевой (черной) красок. Применяется в полиграфии и печати.

Пример

Небесно-голубой цвет #0EA5E9 — это rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) и примерно cmyk(94%, 29%, 0%, 9%). Его контрастность на белом фоне составляет около 2.8:1 — нормально для крупных заголовков и иконок, но слишком мало для основного текста, где требуется 4.5:1. На черном фоне она достигает примерно 7.6:1, уверенно проходя проверку.

Советы по работе с цветом

  • Создавайте палитры в HSL. Зафиксируйте оттенок и насыщенность, меняя только светлоту, чтобы создавать гармоничные состояния кнопок, фоны и границы.
  • Проверяйте контрастность заранее. Многие фирменные цвета слишком светлые для текста на белом фоне; используйте более темный оттенок из палитры для текста, а исходный — для акцентов.
  • Не полагайтесь только на цвет для передачи смысла — добавляйте иконки или подписи для людей с нарушениями цветовосприятия.
  • Учитывайте, что при печати цвета могут отличаться. Яркие цвета RGB, особенно насыщенные синие и зеленые, в CMYK часто выглядят более тусклыми.

Работаете с изображениями? Конвертер изображений конвертирует изображения между форматами JPG, PNG и WebP. Чтобы закодировать небольшую картинку или иконку для CSS, используйте Base64.

Частые вопросы

Как перевести HEX в RGB?
Цвет в HEX состоит из трех пар шестнадцатеричных цифр для красного, зеленого и синего. Переведите каждую пару из 16-ричной системы в 10-тичную: например, в #FF8800 FF = 255, 88 = 136 и 00 = 0, поэтому получается rgb(255, 136, 0). В трехзначном формате (например, #F80) каждая цифра сначала дублируется.
В чем разница между HSL и HSV (HSB)?
Обе модели описывают цвет через оттенок (0–360°) и насыщенность, но используют разный третий параметр. В HSL светлота 50% — это чистый цвет, 0% — черный, а 100% — белый. В HSV/HSB яркость 100% — это чистый цвет при полной насыщенности, а 0% — черный. Графические редакторы вроде Photoshop и Figma часто используют HSB в палитрах, тогда как CSS использует HSL.
Точна ли конвертация в CMYK для печати?
Значения CMYK — это математическое преобразование из RGB, которое полезно в качестве отправной точки. Реальный результат при печати зависит от принтера, чернил и бумаги, которые определяются цветовыми профилями ICC. Для профессиональной полиграфии выполняйте конвертацию в графическом редакторе, используя профиль вашего принтера.
Что означают коэффициенты контрастности?
Руководство по доступности веб-контента (WCAG) оценивает контрастность между текстом и фоном в диапазоне от 1:1 до 21:1. Обычному тексту требуется соотношение минимум 4.5:1 для соответствия уровню AA, а крупному тексту (около 24 px или 18.7 px для полужирного начертания) — 3:1. Инструмент проверки показывает, проходит ли цвет проверку на белом и черном фоне.
Какие форматы ввода поддерживаются?
HEX из 3, 4, 6 или 8 символов (с # или без), rgb() и rgba(), hsl() и hsla(), hsv() или hsb(), cmyk(), три обычных числа, например 255 136 0, а также CSS-имена цветов, такие как rebeccapurple. Поддерживается синтаксис с разделением запятыми или пробелами, включая альфа-канал, например rgb(14 165 233 / 50%).

Похожие инструменты

Конвертер изображенийКонвертируйте фото и графику в JPG, PNG, WebP и AVIF — пакетно и без загрузки на сервер.Конвертер регистраИзмените регистр текста на любой нужный — от каждого слова с заглавной до snake_case — и смотрите все форматы сразу.Кодирование и декодирование Base64Конвертируйте текст и файлы в Base64 и обратно с полной поддержкой UTF-8 и Base64URL.Генератор теней CSSНастраивайте мягкие, резкие, многослойные или внутренние тени с предпросмотром в реальном времени и копируйте CSS-код.Симулятор дальтонизмаВзгляните на свои изображения глазами человека с нарушениями цветовосприятия, чтобы убедиться в доступности вашего дизайна.Проверка контрастности цветовУзнайте, достаточно ли читабелен ваш текст, и подберите ближайший цвет, соответствующий стандартам WCAG.