Руководство по конвертации цветовых форматов: HEX, RGB, HSL, OKLCH — полное покрытие

Утилиты

Обзор цветовых форматов

Распространённые цветовые форматы в веб-разработке:

Формат Пример Характеристики
HEX #FF6B35 Наиболее распространённый, компактный
RGB rgb(255, 107, 53) Интуитивный, значения каналов 0-255
HSL hsl(16, 100%, 60%) Тон/Насыщенность/Светлота, интуитивный для настройки
OKLCH oklch(0.68 0.17 37) Перцептивно однородный, рекомендуется для современного CSS

Разные форматы представляют один и тот же цвет — просто разные системы координат.

Формат HEX

HEX использует шестнадцатеричную систему для представления трёх каналов RGB:

#FF6B35
 ↑ ↑ ↑
 R G B  → Каждый канал 00-FF (0-255)
  • 3-значная сокращённая запись: #F63 эквивалентно #FF6633
  • 4-значная сокращённая запись с альфа: #F63A эквивалентно #FF6633AA
  • 8-значная полная запись с альфа: #FF6B3580 (80 = 50% непрозрачности)

RGB и альфа-канал

RGB напрямую сопоставляет основные цвета дисплея:

rgb(255, 107, 53)          /* непрозрачный */
rgba(255, 107, 53, 0.5)    /* 50% прозрачности */
rgb(255 107 53 / 50%)      /* современный синтаксис */

Альфа-канал: 1 = полностью непрозрачный, 0 = полностью прозрачный. Современный CSS предпочитает rgb() с разделёнными пробелами значениями и / для прозрачности.

HSL: Интуитивная настройка цвета

HSL раскладывает цвет на тон, насыщенность и светлоту:

Параметр Диапазон Значение
H (Тон) 0-360° Угол цветового круга: 0=красный, 120=зелёный, 240=синий
S (Насыщенность) 0-100% 0%=серый, 100%=чистый цвет
L (Светлота) 0-100% 0%=чёрный, 50%=чистый цвет, 100%=белый

Советы по настройке:

  • Одинаковый тон, разные оттенки? Зафиксируйте H и S, настройте L
  • Мягкий тон? Уменьшите S
  • Дополнительный цвет? H ± 180°

OKLCH: Перцептивно однородный стандарт

OKLCH — это цветовое пространство, представленное в CSS Color Level 4, основанное на человеческом восприятии:

Преимущество Описание
Перцептивная однородность Изменение яркости от 0,5→0,6 выглядит так же, как 0,7→0,8
Более широкий охват Поддерживает P3 и другие дисплеи с широким охватом
Предсказуемые настройки Фиксированное L с изменяющимся C/H сохраняет визуальную яркость постоянной 
oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → Светлота/Хрома/Тон

L=50% в HSL сильно варьируется по визуальной яркости в зависимости от тона. OKLCH исправляет это.

Использование инструмента конвертации цветов

Шаг 1: Откройте инструмент

Посетите инструмент конвертации цветов и введите цвет в любом формате.

Шаг 2: Выберите формат ввода

Введите цвет в поле ввода. Поддерживаемые форматы:

  • HEX: #FF6B35
  • RGB: 255, 107, 53
  • HSL: 16, 100%, 60%
  • OKLCH: 0.68, 0.17, 37

Шаг 3: Просмотр результатов конвертации

Инструмент автоматически отображает все конвертации форматов. Скопируйте любой результат напрямую.

Шаг 4: Настройка альфа-канала

Установите флажок «Включить прозрачность» и введите значение альфа (0-1). Результаты будут включать альфа-канал.

CSS color-mix() на практике

OKLCH в сочетании с color-mix() обеспечивает точное смешивание цветов:

/* Смешивание в пространстве OKLCH — перцептивно однородное */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* Смешать 30% акцентного цвета */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

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

Цветовые форматы в градиентах

При использовании генератора градиентов рекомендуется формат OKLCH:

/* Переходы градиента OKLCH более равномерны */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

Традиционные градиенты RGB/HSL могут давать тусклые средние точки на цветовом круге. OKLCH избегает этого.

Частые проблемы

Проблема Причина Решение
Неверный результат HEX в RGB Сокращённая запись не раскрыта Сначала раскройте до 6-значного HEX
Смещение цвета HSL в HEX Потеря точности с плавающей точкой Используйте инструмент для точной конвертации
OKLCH не поддерживается Старый браузер Используйте CSS-замену или плагин PostCSS
Некорректное отображение альфа-значения Смешаны проценты и десятичные дроби Используйте последовательно десятичные 0-1 или 0%-100%

Итоги

Освоение форматов HEX, RGB, HSL и OKLCH и их конвертации — фундаментальный навык для фронтенд-разработки и дизайна. Перцептивная однородность OKLCH делает его лучшим выбором для современного CSS. Инструмент конвертации цветов выполняет все конвертации форматов в один клик, а проверка контрастности и генератор градиентов дополняют ваш цветовой рабочий процесс.

#颜色#HEX#RGB#HSL#色彩转换