Цвет
Понимает #rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() и oklch() — с запятыми и без. Прозрачность сохраняется и переносится во все форматы.
Цвет со страницы берётся так: DevTools → выделить элемент → в панели Styles нажать на цветной квадратик у свойства color или background-color — откроется пипетка, а клик по значению переключает формат записи. Скопируйте и вставьте сюда. Имена вроде rebeccapurple инструмент не разбирает — в DevTools кликните по значению, чтобы браузер сам показал его как HEX.
Палитра
Крутите ползунки — цвет собирается по осям OKLCH и сразу попадает в поле «Значение цвета», в таблицу форматов и в превью. Вставили цвет текстом — ползунки сами встанут на его место. Серые цвета живут при насыщенности около нуля: тон тогда почти ни на что не влияет, так и задумано.
Форматы
| HEX | | |
|---|---|---|
| RGB | | |
| HSL | | |
| OKLCH | | |
| Контраст | Разобрать → |
Превью на обеих темах
Фоны фиксированные — белый и тёмно-серый, — они не меняются вместе с темой сайта. Так превью показывает цвет, а не тему. Проверить пару «этот цвет как текст на этом фоне» по WCAG умеет «Контраст» — открыть его.
Что здесь важно знать
Зачем четыре формата одному цвету. В макете Figma цвет придёт как HEX, в вычисленных стилях браузер покажет rgb(), в свежих дизайн-системах всё чаще стоит oklch(). Сверяя макет с версткой, вы сравниваете один и тот же цвет в разных записях — и «не совпало» часто означает лишь разный формат, а не разный цвет.
OKLCH — это про «на глаз одинаково». Три его числа: светлота, насыщенность (chroma) и тон (hue) в градусах. Главное свойство: два цвета с одной светлотой L действительно выглядят одинаково светлыми — у HSL это не так, там hsl(60, 100%, 50%) (жёлтый) и hsl(240, 100%, 50%) (синий) формально одинаково «светлые», а на экране различаются в разы. Поэтому проверять пары «текст/фон» и строить шкалы цветов удобнее в OKLCH.
Не каждый OKLCH-цвет существует в sRGB. Запись вроде oklch(90% 0.3 150) задаёт цвет ярче и чище, чем умеет обычный экран. Браузер в таком случае молча показывает ближайший похожий — и этот инструмент делает так же, но говорит об этом вслух в вердикте. Если видели такое предупреждение — знайте, что HEX рядом уже не тот цвет, что был написан в OKLCH.
Прозрачность — часть цвета. #7c5cff80 и #7c5cff — разные цвета: первый наполовину прозрачен и на разном фоне выглядит по-разному. Именно поэтому превью здесь двойное: полупрозрачный цвет на светлом и тёмном фоне — это два разных видимых цвета, и баг «на макете не так» часто живёт ровно тут.
Цвета для пробы есть на этой же странице: откройте DevTools, ткните в любую кнопку и скопируйте её background-color из вычисленных стилей — получится готовый пример для проверки.
Частые вопросы
Чем OKLCH лучше HSL?
У OKLCH одинаковая светлота действительно выглядит одинаково светлой — а у HSL жёлтый и синий с одной «светлотой» различаются на глаз в разы. Поэтому шкалы цветов и пары текст–фон удобнее собирать в OKLCH.
Почему инструмент пишет, что такого цвета нет в sRGB?
Запись oklch() умеет задавать цвета ярче и чище, чем показывает обычный экран. Инструмент, как и браузер, показывает ближайший — но говорит об этом вслух, и HEX рядом описывает уже зажатый цвет.
Имена цветов вроде red поддерживаются?
Нет, только числовые записи. В DevTools клик по значению цвета переключает формат записи — возьмите оттуда HEX.