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

Бесплатный конвертер цвета от Bee Tools. Конвертируйте HEX, RGB, HSL, HSV и CMYK в реальном времени, с пипеткой, 10-ступенчатой шкалой яркости и дополнительными/триадными/аналоговыми палитрами.

Конвертация в реальном времени между HEX, RGB, HSL, HSV и CMYK со шкалами и палитрами. Конвертер цвета от Bee Tools работает на нативном JavaScript. Вставьте любой из пяти форматов и смотрите обновление остальных мгновенно, плюс 10-ступенчатая шкала яркости и дополнительные/триадные/аналоговые палитры — идеально для UI-дизайна, фронтенд-токенов и печати.

Шкала яркости
Связанные палитры
Дополнительный
Триадный 1
Триадный 2
Аналоговый

Полное руководство по цветовым пространствам

Сравнение пяти цветовых пространств

  • HEX — стандарт CSS. #RRGGBB выражает 24-битный цвет.
  • RGB — аддитивные первичные цвета. Экранная модель, легко считать.
  • HSL — оттенок, насыщенность, яркость. Удобно для регулировки яркости и насыщенности.
  • HSV — оттенок, насыщенность, значение. Значение по умолчанию в пипетке Photoshop.
  • CMYK — голубой, пурпурный, жёлтый, ключ (чёрный). Вычитающее смешение, эталон для печати.

Типичные сценарии конвертации

  1. Дизайн → фронтенд: HEX → RGB / HSL для Tailwind или CSS-переменных.
  2. Фирменная палитра: HSL генерирует полную шкалу яркости из одного оттенка.
  3. Печатная продукция: конвертируйте экранный RGB в CMYK и сверьтесь с пробным оттиском.
  4. Дизайн палитры: подвиньте оттенок HSL на ±30° / ±120° / ±180° для аналогового, триадного и дополнительного цветов.

Профессиональные советы

  • Стремитесь к яркости 45–55% на фирменных основных цветах — так проще построить палитру 100–900.
  • Текст на фоне должен соответствовать контрасту WCAG 4.5:1; итерируйте со шкалой яркости.
  • 6-значный HEX не описывает широкий охват. Для устройств Display P3 / Rec.2020 используйте синтаксис CSS Color 4 color(display-p3 ...).
  • Всегда перепроверяйте вывод CMYK в профессиональном ПО перед печатью — этот инструмент использует sRGB-математическую модель.

Об этом инструменте

Конвертер цвета от Bee Tools работает полностью в вашем браузере. Ввод из пипетки, HEX, RGB, HSL или HSV — и вы получаете синхронизированную 10-ступенчатую шкалу яркости плюс четыре типа связей палитры. Ничего не загружается, работает офлайн.

Примечание с открытым исходным кодом: логика конвертации цвета — собственная реализация на нативном JavaScript от этого проекта, выпущенная под MIT License, без сторонних зависимостей времени выполнения.

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

Какие форматы цвета поддерживаются?
HEX (#RRGGBB / #RGB), RGB, HSL, HSV и CMYK — пять самых распространённых цветовых пространств, обновляемых в реальном времени.
Насколько точны результаты?
RGB использует целые числа 0–255, HSL/HSV используют проценты, а CMYK использует целые числа 0–100, округлённые до целого — как в основном ПО для дизайна.
Данные цвета загружаются куда-либо?
Нет. Вся конвертация работает локально в вашем браузере. Значения никогда не покидают ваше устройство.
Почему HEX → CMYK → HEX не совпадает с исходным?
Цветовые охваты RGB и CMYK различаются. Экран (RGB) охватывает больше цветов, чем печать (CMYK); цвета вне охвата отображаются при конвертации. Это ожидаемое поведение.
Что такое дополнительный, триадный и аналоговый цвета?
Дополнительный = на 180° (высокий контраст). Триадный = три цвета через 120° (сбалансированный). Аналоговый = ~30° (гармоничный).
Как использовать сгенерированную шкалу яркости?
Она разбивает текущий оттенок на 10 ступеней яркости (10%–100%), идеально для построения UI-палитр или Tailwind-токенов цвета.
Поддерживаются ли альфа-каналы?
Эта версия ориентирована на непрозрачные цветовые пространства. Для RGBA/HSLA добавьте альфа-значение вручную после вывода RGB/HSL.