Шестнадцатеричная палитра и конвертер цветов (RGB, HSL, HSV)

Преобразуйте шестнадцатеричные изображения в RGB, HSL и HSV, копируйте образцы гармонии и экспортируйте CSS или JSON — прямо в браузере.

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

Шестнадцатеричный цвет

Введите #RGB или #RRGGBB (с # или без него). Недопустимые значения сохраняют последнюю удачную конверсию.

Конверсии

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

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

Тип гармонии

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

Тонировочная/оттеночная полоска

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

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

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",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

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

Как использовать эту шестнадцатеричную палитру цветов

Введите или вставьте шестнадцатеричное значение или воспользуйтесь собственным средством выбора. Страница мгновенно преобразует его в RGB, HSL и HSV, генерирует образцы гармонии и полосу оттенков/теней и сохраняет все готовым для копирования. Поделитесь своими настройками с помощью URL-адреса — состояние хранится в строке запроса.

Эталонные значения Hex, RGB, HSL и HSV

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

Дополнительные, аналогичные, триадные и монохроматические.

Дополнительный поворачивает оттенок на 180°. Аналогичные ступени оттеняются фиксированным углом вокруг вашего основания. Triadic использует смещения 120°. Монохромный сохраняет оттенок и меняет яркость. Элементы управления счетом применяются к аналоговым и монохроматическим режимам.

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

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

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

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

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

Что произойдет, если мой гекс недействителен?

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

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

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

Что такое экспорт JSON?

Стабильные ключи: baseHex, HarmonyCount, где это применимо, HarmonySwatches (шестнадцатеричные строки), TintShadeStrip и StripCount — подходят для инструментов или документации.

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

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