oklch()
Цвет в пространстве OKLCH: воспринимаемая светлота, насыщенность и тон.
Синтаксис
oklch(lightness chroma hue / alpha)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| lightness | 0–1 | % | Воспринимаемая светлота от 0 (чёрный) до 1 (белый). |
| chroma | number | Насыщенность цвета, от 0 (серый) примерно до 0.37. |
| hue | angle | Угол тона от 0 до 360. |
Примеры
Разные тона с одинаковой светлотой действительно выглядят одинаково светлыми:
<style>
div { padding: 8px; color: black; }
</style>
<div style="background: oklch(0.8 0.15 90);">oklch(0.8 0.15 90) — yellow</div>
<div style="background: oklch(0.8 0.15 150);">oklch(0.8 0.15 150) — green</div>
<div style="background: oklch(0.8 0.15 250);">oklch(0.8 0.15 250) — blue</div>Примечания
OKLCH удобен для палитр: меняете только тон, а контраст остаётся прежним. Им можно задать и цвета за пределами sRGB для современных экранов. Поддерживается всеми актуальными браузерами с 2023 года.
См. также
- hsl() — Цвет по тону, насыщенности и светлоте.
- color-mix() — Смешивает два цвета в заданной пропорции.
- color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).
В учебнике
- Современные цвета — Функция oklch() и почему с ней удобно строить палитры, смешивание цветов color-mix() и относительный синтаксис oklch(from ...).