Крупный текст, 24 px
Обычный текст 15 px. Съешь же ещё этих мягких французских булок да выпей чаю.
Переведите HSL в код HEX: hsl(210, 100 %, 50 %) — это #0080FF, чистый лазурный. В HSL удобно думать при проектировании, а HEX требуют большинство гайдлайнов и программ, так что переведите один раз и скопируйте.
Как пользоваться
- Нажмите на большой образец, чтобы открыть палитру, возьмите цвет с экрана пипеткой или введите значение в любое поле.
- Вставьте любой CSS-цвет (#hex, rgb(), hsl(), hwb(), oklch(), lab(), название…) в поле или в любое место страницы.
- Нажмите кнопку копирования рядом с форматом. Ползунок «Непрозрачность» добавляет прозрачность.
- В палитре нажмите на образец, чтобы сделать его текущим; долгое нажатие (или правый клик) копирует HEX. На вкладке «Контраст» задайте цвета текста и фона и нажмите на подсказку, чтобы исправить неподходящую пару.
- WCAG 2.1 требует 4,5:1 для обычного текста (AA) и 7:1 для AAA. Крупному тексту (24 px или 18,66 px жирным) нужно 3:1 для AA и 4,5:1 для AAA. Элементам интерфейса и графике — 3:1.
- Подсказки сохраняют тон и насыщенность и меняют только светлоту (в OKLCH) до ближайшего подходящего значения.
- Полупрозрачные цвета смешиваются с фоном перед расчётом.
- Значения CMYK — упрощённое преобразование; для печати используйте цветовой профиль типографии.
- Недавние цвета хранятся только в этом браузере.
Форматы цвета
HEX — шестизначный код из CSS и графических редакторов: #1E88E5 означает красный 1E (30), зелёный 88 (136) и синий E5 (229). RGB записывает те же значения в десятичном виде, от 0 до 255. HSL описывает тон (0–360°), насыщенность и светлоту, поэтому цвет легко затемнить или приглушить. HSV — модель, на которой построены квадраты большинства пипеток.
OKLCH — более новый формат CSS на основе перцептивного пространства Oklab: равные шаги светлоты выглядят одинаково заметными, поэтому он хорош для шкал и доступных палитр. CMYK описывает расход красок при печати; здесь это простой перевод без профиля, для точных цветов используйте профиль своей типографии.
Перевод вручную
Чтобы перевести HEX в RGB, разбейте код на три пары и переведите каждую из шестнадцатеричной системы: #FF6347 даёт 255, 99, 71. CMYK из RGB: K = 1 − max(R, G, B) / 255, затем C = (1 − R/255 − K) / (1 − K), так же для M и Y; чистый оранжевый rgb(255, 165, 0) — это cmyk(0 %, 35 %, 100 %, 0 %). Инструмент делает это мгновенно и понимает названия, rgb(), hsl(), hwb(), lab() и oklch().
Как собрать палитру
Светлые оттенки смешивают цвет с белым, тёмные — с чёрным: получаются ступени для фонов, рамок и состояний при наведении. Гармоничные палитры поворачивают тон: дополнительный (180°), аналоговые (±30°), триада (120°) и тетрада (шаг 90°). Недавние цвета хранятся только в этом браузере.
Частые вопросы
Как перевести HEX в RGB?
Вставьте код HEX в любое поле и скопируйте значение RGB. Вручную разбейте код на пары и переведите каждую из шестнадцатеричной системы: #1E88E5 — это rgb(30, 136, 229).
Как взять цвет с экрана?
Нажмите на пипетку и щёлкните в любом месте экрана. Это работает в браузерах с поддержкой EyeDropper API, например в Chrome и Edge на компьютере.
Что такое OKLCH и зачем он нужен?
OKLCH — формат цвета CSS со светлотой, цветностью и тоном на основе модели Oklab. Если менять только светлоту, получаются равномерные ступени с тем же тоном, чего не даёт обычный HSL.
Подходят ли значения CMYK для печати?
Это математический перевод без цветового профиля. Отпечаток зависит от бумаги, краски и машины, поэтому для фирменных цветов берите значения CMYK из профиля вашей типографии.
Можно ли добавить прозрачность?
Да. Передвиньте ползунок непрозрачности, и все форматы обновятся: к HEX добавится пара альфа-канала (#RRGGBBAA), а к функциям CSS — значение альфы.
Сохраняется ли история цветов?
Недавние цвета хранятся только в этом браузере на вашем устройстве. На сервер ничего не отправляется.