Выбор цвета
Онлайн-инструмент выбора цвета, конвертация между форматами HEX, RGB, HSL, создание цветовых схем
Что такое выбор цвета?
Палитра выбора цвета помогает подбирать, проверять и преобразовывать цвета для дизайна и фронтенд-разработки. Один и тот же цвет можно записать разными форматами: HEX компактный и часто используется в CSS, RGB описывает каналы красного, зеленого и синего, а HSL выражает тон, насыщенность и светлоту, что удобно для настройки палитры. Инструмент полезен при переводе фирменного цвета в код, сравнении цветовых моделей, создании небольшой палитры и проверке дополнительных или аналогичных оттенков. Выбор цвета — это не только эстетика: важны контраст, читаемость, доступность, печать и калибровка экрана. Важные цвета интерфейса нужно тестировать на финальном фоне и по требованиям доступности.
Как использовать
Как использовать
- Нажмите на палитру, чтобы выбрать цвет, или введите значение цвета в поле ввода
- Просмотрите результаты конвертации в форматах HEX, RGB и HSL
- Нажмите кнопку «Копировать» рядом с нужным форматом, чтобы скопировать значение цвета
- Используйте цветовые схемы для подбора комплементарных, аналогичных и других сочетаний
- Используйте оттенки и тона, чтобы получить более тёмные и светлые варианты того же цвета
Советы по работе с цветами
- Перед использованием цвета для текста, иконок или элементов управления проверьте контрастность: даже визуально приятные цвета могут не отвечать требованиям доступности.
- Используйте HSL при настройке яркости или насыщенности, а HEX или RGB — при вставке значений в CSS или в дизайн-токены.
Применение
Технический принцип
Все значения в этом инструменте находятся в цветовом пространстве sRGB, определённом стандартом IEC 61966-2-1, которое предполагается по умолчанию для HEX-литералов в CSS, функции rgb() и любого чтения из <canvas>. HEX #RRGGBB — это упакованное 24-битное целое число (8 бит на канал, 0–255); HEX #RRGGBBAA добавляет байт прозрачности; rgb()/rgba() представляют те же каналы как целые числа или проценты; hsl()/hsla() переключаются на цилиндрические координаты с тоном в градусах [0, 360), насыщенностью и светлотой в [0%, 100%]. При конвертации RGB в HSL вычисляется L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) для ненулевой цветности, а H определяется по кусочно-линейной формуле с шестью сегментами в зависимости от того, какой канал максимален. Обратная конвертация HSL в RGB использует стандартный алгоритм t = L < 0,5 ? L(1+S) : L+S-LS с последующим масштабированием каждого канала обратно в диапазон 0–255. Выбор цвета использует нативный элемент <input type="color">, который в поддерживающих браузерах также предоставляет доступ к EyeDropper API (Chrome 95+, Edge 95%; Safari и Firefox пока не поддерживают по состоянию на 2026 год). EyeDropper запускает выборку на уровне ОС и возвращает HEX-строку в sRGB, но не может выбирать цвета из кросс-доменных iframe или защищённых DRM-поверхностей. Генерация палитры выполняется поворотом тона HSL: комплементарный цвет — +180 градусов, триада — +/-120 градусов, аналогичные — +/-30 градусов, разделённые комплементарные — +150 и +210 градусов. Светлые и тёмные оттенки изменяют светлоту фиксированными шагами (обычно +10% к белому для светлых, -10% к чёрному для тёмных) при неизменном тоне и насыщенности. Контраст рассчитывается по WCAG 2.1 SC 1.4.3/1.4.6: каждый канал гамма-декодируется кусочно-линейной функцией передачи sRGB (линейный сегмент ниже 0,03928, степенной с показателем 2,4 выше), затем вычисляется относительная яркость по весам 0,2126R + 0,7152G + 0,0722B, после чего отношение равно (L_светлый + 0,05) / (L_тёмный + 0,05). Пороговые значения: 4,5:1 для AA обычного текста, 3:1 для AA крупного текста и компонентов интерфейса, 7:1 для AAA. Учтите, что sRGB — это пространство с 8 битами на канал, поэтому широкоохватные дисплеи с Display P3 (Apple) или Rec. 2020 могут отображать тот же HEX-код с заметно более насыщенными основными цветами; для цветокритичной работы с несколькими устройствами присваивайте цвету профиль, а не полагайтесь на необработанные тройки RGB.
- Цветовое пространство sRGB по IEC 61966-2-1; 8 бит на канал, всего 16 777 216 отображаемых цветов.
- Конвертация HSL в RGB использует t = L<0,5 ? L(1+S) : L+S-LS, затем lookup hue2rgb() для каждого канала.
- EyeDropper API требует Chrome/Edge 95+ и жест пользователя; кросс-доменные iframe-поверхности заблокированы.
- Контраст WCAG: гамма-декодирование sRGB, вес яркости 0,2126R + 0,7152G + 0,0722B, затем (L1+0,05)/(L2+0,05).
- Комплементарный цвет = +180 градусов тона, триада = +/-120 градусов, аналогичные = +/-30 градусов, разделённые комплементарные = +150/+210 градусов.
- canvas.getImageData возвращает пиксели Uint8ClampedArray RGBA, но требует, чтобы canvas был того же origin (запрещены tainted-изображения).
- Широкоохватные мониторы Display P3 / Rec. 2020 отображают тот же HEX с более насыщенными основными цветами — используйте профиль для цветокритичной работы.
Примеры
Выбор фирменного цвета и копирование в трёх форматах
Выбран: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
Копируйте тот формат, который соответствует окружающему коду. Все три
значения описывают один и тот же цвет sRGB (IEC 61966-2-1, 8 бит на канал);
страница преобразует их по стандартным формулам RGB <-> HSL.Создание комплементарной схемы
База: #2563eb (синий)
Комплементарный:#eb7a25 (оранжевый) hue +180 град.
Аналоговый-1: #5a25eb (фиолетовый) hue +60 град.
Аналоговый-2: #256beb (лазурный) hue -30 град.
Триада-1: #25eb56 (зелёный) hue +120 град.
Триада-2: #eb2525 (красный) hue -120 град.
Комплементарные цвета подходят для контрастных акцентов, аналоговые —
для гармоничных фонов, триадные — для ярких иллюстраций.
Яркость и насыщенность сохраняются, меняется только оттенок.Проверка контраста WCAG перед публикацией
Передний план: #1f2937 (gray-800, относительная яркость 0.022)
Фон: #ffffff (белый, относительная яркость 1.000)
Коэффициент контраста: (1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
Соответствует WCAG AAA для обычного текста (>= 7:1) и крупного текста (>= 4.5:1),
а также порогу 3:1 для UI-компонентов. Проводите такую проверку для
каждой пары «текст/фон», уходящей в продакшен; страница рассчитывает
относительную яркость по кусочной функции передачи sRGB
(гамма-декодирование, веса 0.2126R + 0.7152G + 0.0722B).Часто задаваемые вопросы
Какие форматы цвета показывает инструмент?
HEX (#RRGGBB), RGB (rgb(R, G, B)) и HSL (hsl(H, S%, L%)). Также страница показывает комплементарные, аналогичные, триадные и сплит-комплементарные цветовые схемы, а также светлые и тёмные оттенки на основе выбранного цвета.
В чём разница между HSL и HSV?
Оба разлагают цвет на тон (0-360°), насыщенность и компонент яркости. Третье измерение HSL — светлота (50% — максимальная насыщенность, 0% — чёрный, 100% — белый). Третье измерение HSV — value (100% — максимальная насыщенность, 0% — чёрный, белого нет). HSL интуитивнее для светлых и тёмных оттенков; HSV ближе к тому, как художники смешивают краски.
Насколько точны конвертации цветов?
HEX, RGB и HSL — это точные математические преобразования: все они описывают один и тот же цвет в sRGB. Страница конвертирует между ними по стандартным формулам без потери точности.
Будет ли один и тот же hex-цвет выглядеть одинаково на всех экранах?
Нет. sRGB — стандартное цветовое пространство веба; дисплеи с расширенной гаммой (P3, Adobe RGB) без управления цветом могут отображать тот же hex более насыщенно. Калибровка тоже различается. Тестируйте критичные цвета на целевом устройстве, особенно при работе с брендингом.
Как генерируются цветовые схемы?
Схемы поворачивают тон HSL, сохраняя насыщенность и светлоту постоянными. Комплементарный — +180°, триадный — +120° / +240°, аналогичный — ±30°, сплит-комплементарный — +150° / +210°. Светлые оттенки сдвигают светлоту к 100% (белый), тёмные — к 0% (чёрный).
Это только для экранных цветов?
Инструмент работает в цветовом пространстве sRGB, которое подходит для веба и большинства потребительских экранов. Конвертации стандартные и хорошо проверены для CSS и работы с UI.
Загружается ли что-либо куда-либо?
Нет. Страница — это чистый JavaScript в браузере. Цветовые значения не сохраняются и не передаются.