Выбор и конвертер цвета Hex (RGB, HSL, HSV, CMYK, OKLCH)

Преобразуйте любой цвет в HEX, RGB, HSL, HSV, CMYK и OKLCH, проверьте контраст, скопируйте образцы гармонии и экспортируйте CSS или JSON — прямо в браузере.

Для интерактивных функций требуется JavaScript. Пожалуйста, включите JavaScript в вашем браузере, чтобы использовать этот инструмент.

Значение цвета

Введите hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() или имя цвета CSS. Недопустимые значения сохраняют последнее корректное преобразование.

Ближайшее имя CSS: royalblue

Непрозрачность100%

Преобразования

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

Контраст WCAG

На белом фоне

3.68:1

Соответствует WCAG AA (только крупный текст)

На чёрном фоне

5.71:1

Соответствует WCAG AA (обычный текст)

Образцы гармонии

Тип гармонии

Количество образцов

Полоса оттенка/тени

Шаги оттенка/тени

Экспорт образцов

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

Выберите или вставьте любой формат цвета, преобразуйте в HEX, RGB, HSL, HSV, CMYK и OKLCH, проверьте контраст WCAG, создайте образцы гармонии, скопируйте значения и экспортируйте CSS или JSON. Бесплатно, быстро и полностью в браузере.

Как пользоваться этим выбором цвета

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

Справочник HEX, RGB, HSL, HSV, CMYK и OKLCH

Hex — компактное кодирование RGB. RGB описывает красный/зелёный/синий каналы. HSL выражает оттенок, насыщенность и светлоту; HSV использует оттенок, насыщенность и значение (яркость). CMYK моделирует проценты печатных чернил. OKLCH — перцептуально равномерное цветовое пространство CSS. Инструмент использует детерминированные вычисления в браузере — без загрузок и внешних API.

Комплементарный, аналоговый, триадный, раздельно-комплементарный, тетрадный и монохромный

Комплементарный поворачивает оттенок на 180°. Аналоговый шагает оттенком с фиксированным углом вокруг базы. Триадный использует смещения 120°. Раздельно-комплементарный добавляет два оттенка рядом с комплементом. Тетрадный использует прямоугольные смещения 90°. Монохромный сохраняет оттенок и меняет светлоту. Управление количеством применяется к аналоговому и монохромному режимам.

Переменные CSS и экспорт JSON

Экспорт создаёт пользовательские свойства :root со стабильными именами (например --color-base, --color-analogous-1) и JSON с baseHex, alpha, namedColor, режимом гармонии, коэффициентами контраста и списками образцов для скриптов или дизайн-токенов.

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

Коэффициент контраста вычисляется из относительной яркости по WCAG 2.x. AA требует 4,5:1 для обычного текста и 3:1 для крупного; AAA требует 7:1. Используйте предпросмотр при выборе цветов текста или интерфейса на светлом или тёмном фоне.

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

Какие форматы цвета можно вводить?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() и все стандартные именованные цвета CSS, такие как cornflowerblue или rebeccapurple.

Расширяется ли #ABC до шести цифр?

Да. Трёхзначный hex расширяется по парам цифр, поэтому #ABC становится #AABBCC.

Что произойдёт, если цвет недопустим?

Появится встроенная ошибка. Последний допустимый цвет остаётся в строках преобразования, выборе и экспорте, пока вы снова не введёте допустимое значение.

Как работает проверка контраста WCAG?

Вычисляется коэффициент контраста между вашим цветом и чистым белым или чёрным с использованием относительной яркости. Результаты показывают, соответствует ли цвет порогам AA или AAA для обычного или крупного текста.

Как рассчитываются цвета гармонии?

Они детерминированы: комплементарный — сдвиг оттенка 180°; аналоговый — фиксированные шаги оттенка; триадный — смещения 120°; раздельно-комплементарный — оттенки рядом с комплементом; тетрадный — прямоугольные смещения 90°; монохромный меняет светлоту, сохраняя оттенок и насыщенность базы.

Что содержит экспорт JSON?

Стабильные ключи: baseHex, alpha, namedColor, harmony, harmonyCount где применимо, harmonySwatches, tintShadeStrip, stripCount и коэффициенты контраста — подходят для инструментов или документации.

Могу ли я поделиться своими цветами?

Да. URL обновляется с hex, alpha, режимом гармонии, счётчиками и размером полосы, чтобы вы могли сохранить или поделиться точной настройкой.