Инструменты для разработчиков
Инструменты цвета

Конвертер цветов онлайн — RGB, HEX, HSL, HSV и CMYK

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

Переводите цвет между HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK и CMYKA в одном окне. Достаточно изменить любое поле — остальные форматы пересчитываются мгновенно в обе стороны, а живой образец, палитра браузера и ползунок alpha помогают точно подобрать оттенок и прозрачность. Все вычисления идут локально в браузере, поэтому ваши цветовые значения никуда не загружаются. Конвертер работает с экранными форматами; для перевода в веер RAL, NCS или Pantone используйте его как первый шаг — получите точные RGB/HEX, а затем сверьте их с нужным каталогом.

Мгновенная синхронизацияБез загрузки файлов

Визуальный предпросмотр

Используйте образец, встроенный выбор цвета и ползунок alpha, чтобы точно настраивать один и тот же цвет во всех форматах.

Цвет предпросмотра

#3B82F6

rgba(59, 130, 246, 0.84)

Палитра цвета

#3B82F6

Альфа

0.84
01

Живые каналы

HEX
R
59
G
130
B
246
A
0.84

Совет по редактированию

Если во время ввода поле временно становится некорректным, последняя валидная цветовая схема остаётся активной. Завершите значение, и остальные форматы автоматически синхронизируются снова.

Мгновенная синхронизацияБез загрузки файлов

Двунаправленный редактор цветовых форматов

Все форматы ниже можно редактировать. Измените HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK или CMYKA, и остальные цветовые модели сразу останутся синхронизированными.

HEX

источник

RGB

RGBA

HSL

HSLA

HSV

HSVA

CMYK

CMYKA

Объяснение

Объяснение

RGB

RGB — это стандартная цветовая модель, состоящая из каналов красного (R), зелёного (G) и синего (B). Изменяя интенсивность этих трёх каналов, RGB может передать большинство цветов, видимых на экранах. Это одна из самых распространённых систем цветов в цифровой среде.

RGBA

RGBA — это RGB с альфа-каналом для прозрачности. R, G и B обычно используют значения от 0 до 255, а A — от 0 до 1 или от 0% до 100%. Формат часто применяется в CSS, когда одному и тому же цвету нужна разная непрозрачность.

HEX

HEX — это шестнадцатеричный способ представления цветов. Он широко используется в веб-дизайне и CSS, потому что компактен и удобен для копирования. Значение вроде #2E8B57 хранит красный, зелёный и синий в виде шестнадцатеричных пар, а расширенные варианты могут включать и прозрачность.

HSL

HSL (тон, насыщенность, светлота) представляет RGB-цвета в цилиндрической системе координат. H обозначает базовый оттенок, S — чистоту цвета, а L — яркость. 0% — самый тёмный вариант, 50% — сбалансированный, 100% — самый светлый.

HSLA

HSLA — это вариант HSL с альфа-каналом. Он сохраняет тон, насыщенность и светлоту и добавляет прозрачность, что делает его удобным для теней, полупрозрачных заливок, оверлеев и состояний интерфейса.

HSV

HSV (тон, насыщенность, значение) — это цветовое пространство, созданное A. R. Smith в 1978 году, также известное как Hexcone Model. Поскольку Value напрямую описывает воспринимаемую яркость, HSV часто удобен для интуитивного выбора цвета.

HSVA

HSVA расширяет HSV альфа-каналом. Это полезно, если вы хотите использовать модель тона, насыщенности и значения и одновременно описывать непрозрачность для цветов интерфейса и многослойной графики.

CMYK

CMYK — это цветовая модель, используемая в полиграфии. Печатные материалы видны благодаря отражённому свету, поэтому CMYK подходит для газет, упаковки и буклетов. В отличие от экранного RGB, CMYK создан для красок на бумаге.

CMYKA

CMYKA расширяет CMYK добавлением альфа-канала. Это полезно, когда нужно описать значения cyan, magenta, yellow и key вместе с прозрачностью для передачи дизайна или многослойных материалов.

Ключевые возможности

Двунаправленная синхронизация форматов

Изменяйте любой поддерживаемый формат и поддерживайте RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK и CMYKA синхронизированными в реальном времени.

Визуальное управление цветом

Сразу смотрите текущий цвет с помощью живого образца, выбора цвета браузера, ползунка alpha и показаний каналов.

Конвертация в браузере

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

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

  1. 1

    Введите значение цвета

    Вставьте или впишите цвет в любое поле — например #2E8B57 для HEX, rgb(46, 139, 87) для RGB или hsl(146, 50%, 36%) для HSL.

  2. 2

    Смотрите, как форматы синхронизируются

    Как только значение становится корректным, инструмент сразу пересчитывает его во все форматы — RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK и CMYKA.

  3. 3

    Точно настройте оттенок

    Используйте живой образец, палитру цвета и ползунок alpha, чтобы подстроить тон и непрозрачность, или нажмите «Случайный», чтобы подобрать новый цвет.

  4. 4

    Скопируйте или экспортируйте

    Нажмите на поле, чтобы скопировать его значение, или используйте «Копировать всё» — все форматы сразу попадут в буфер для CSS, макетов или кода.

Источники

  • W3C — CSS Color Module Level 4

    Спецификация W3C, описывающая цветовые форматы CSS: hex, rgb(), hsl(), hwb() и современный синтаксис цвета.

  • MDN — значение CSS <color>

    Справочник MDN по всем способам записи цвета в CSS: HEX, RGB/RGBA, HSL/HSLA и работа альфа-прозрачности.

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

CSS Minifier

Сожмите CSS, в котором используются ваши значения HEX, RGB и HSL.

SVG Viewer

Просматривайте и проверяйте SVG-графику, где цвета заданы через fill и stroke.

Image to Base64

Кодируйте изображения в строку Base64 для встраивания рядом со стилями цвета.

JSON Formatter

Форматируйте и проверяйте JSON, где хранятся цветовые палитры и дизайн-токены.

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

Как перевести RGB в HEX и обратно?
Впишите значение HEX, например #2E8B57, в поле HEX — и в поле RGB сразу появится rgb(46, 139, 87), и наоборот. Поскольку все форматы синхронизированы, перевод работает в обе стороны без отдельной кнопки.
Можно ли редактировать любой формат и сразу обновлять остальные?
Да. Конвертер синхронизирует значения в обе стороны. Если вы измените RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK или CMYKA, остальные форматы обновятся сразу после ввода корректного значения.
Можно ли подобрать цвета RAL, NCS или Pantone через этот конвертер?
Прямого перевода в веера RAL, NCS, Pantone, Caparol или Tikkurila здесь нет — это каталоги физических красок, привязанные к конкретной поверхности и освещению. Но инструмент помогает сделать первый шаг: получите точные значения RGB и HEX выбранного оттенка, а затем сверьте их с официальным каталогом нужной системы, чтобы найти ближайший номер.
Как обрабатывается прозрачность при конвертации?
HEX показывается без alpha, так как страница ориентирована на запрошенные форматы. Прозрачность сохраняется в RGBA, HSLA, HSVA и CMYKA, а предпросмотр всегда отражает текущую непрозрачность.
Переводит ли инструмент RGB в CMYK для печати?
Да. Поля CMYK и CMYKA обновляются при изменении любого другого формата и дают значения cyan, magenta, yellow и key для печати. Учтите, что CMYK зависит от устройства, поэтому цвет на экране и на бумаге может немного отличаться.
Этот конвертер цветов приватный?
Да. Вся логика конвертации выполняется локально в вашем браузере, поэтому цветовые значения никогда не отправляются на сервер.