oklch()
Zapisuje kolor przez jasność, chromę i odcień w przestrzeni dopasowanej do oka. Kolory o tej samej jasności wyglądają równie jasno.
Przykład
#:root {
--primary: oklch(62% 0.22 295);
--success: oklch(62% 0.15 155);
--danger: oklch(62% 0.21 25);
}
.btn { color: #fff; }
.btn.primary { background: var(--primary); }
.btn.success { background: var(--success); }
.btn.danger { background: var(--danger); }<style>
.btn { padding: 10px 16px; border: 0; border-radius: 10px; font: 600 15px system-ui, sans-serif; }
</style>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<button class="btn primary" type="button">Dalej</button>
<button class="btn success" type="button">Zaliczone</button>
<button class="btn danger" type="button">Usuń</button>
</div>Wszystkie trzy kolory mają tę samą jasność L = 62%, więc biały tekst ma na każdym z nich podobny kontrast.
Definicja i zastosowanie
#Funkcja oklch() opisuje kolor trzema liczbami. L to jasność od 0% do 100% (albo od 0 do 1), C to chroma, czyli intensywność barwy, od 0 w górę, w praktyce do około 0.37, a H to odcień w stopniach na kole barw. Działa podobnie jak hsl(), ale przestrzeń barw zbudowano wokół tego, jak ludzkie oko postrzega jasność.
Największa zaleta: ta sama wartość L naprawdę wygląda na tak samo jasną w każdym odcieniu. oklch(70% 0.12 90) (żółty) i oklch(70% 0.12 260) (niebieski) są dla oka podobnie jasne, a w HSL przy równej jasności żółty byłby wyraźnie jaśniejszy. Dzięki temu łatwiej budować palety i przewidywać kontrast tekstu z tłem.
OKLCH obejmuje też kolory spoza zakresu sRGB. Nowsze ekrany, np. z gamą P3 w telefonach i laptopach, pokazują barwy bardziej nasycone niż te, które opiszesz w rgb() czy hex. Jeśli podasz chromę, której ekran nie potrafi wyświetlić, przeglądarka sama dobierze najbliższy możliwy kolor.
Przezroczystość dodajesz po ukośniku: oklch(65% 0.17 300 / 0.5). Odcienie są rozłożone inaczej niż w HSL: czerwień wypada około 29, zieleń około 142, a niebieski około 264 stopni.
Składnia
#oklch(<jasność> <chroma> <odcień> [/ <alfa>]?)Warianty koloru
#kolor bazowy
Fiolet o średniej jasności i wyraźnej, ale nie przesadnej chromie.jasność 45%
Niższe L przy tej samej chromie i odcieniu. Kolor ciemnieje, ale zostaje tym samym fioletem.chroma 0.07
Niska chroma daje stonowany, przygaszony fiolet. Przy C równym 0 wyszłaby czysta szarość o tej samej jasności.odcień 150
Inny odcień przy tej samej jasności. Zieleń wygląda na równie jasną jak fiolet z pierwszego przykładu, bo L się nie zmieniło.alfa 0.4
Przezroczystość po ukośniku, tak samo jak wrgb()ihsl().
Warianty koloru w praktyce
#oklch(65% 0.17 300)
.demo { background: oklch(65% 0.17 300); }oklch(45% 0.17 300)
.demo { background: oklch(45% 0.17 300); }oklch(65% 0.07 300)
.demo { background: oklch(65% 0.07 300); }oklch(65% 0.17 150)
.demo { background: oklch(65% 0.17 150); }oklch(65% 0.17 300 / 0.4)
rgb() i hsl()..demo { background: oklch(65% 0.17 300 / 0.4); }Więcej przykładów
#.hsl span {
background: hsl(var(--h) 90% 50%);
}
.oklch span {
background: oklch(70% 0.12 var(--h));
}<style>
.row { display: flex; gap: 6px; margin-bottom: 10px; }
.row span { flex: 1; height: 44px; border-radius: 8px; }
.label { margin: 0 0 4px; color: #a1a1aa; font-size: 13px; }
</style>
<p class="label">hsl(h 90% 50%): jasność równa tylko w liczbach</p>
<div class="row hsl"><span style="--h: 30"></span><span style="--h: 90"></span><span style="--h: 150"></span><span style="--h: 260"></span></div>
<p class="label">oklch(70% 0.12 h): jasność równa dla oka</p>
<div class="row oklch"><span style="--h: 30"></span><span style="--h: 90"></span><span style="--h: 150"></span><span style="--h: 260"></span></div>W górnym rzędzie żółtozielony świeci wyraźnie mocniej niż niebieski, choć wszystkie kolory mają L = 50%. W dolnym rzędzie wyglądają na podobnie jasne.
Obsługa przeglądarek
#Szeroko dostępne · od 2023 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Palety buduj, zmieniając tylko L przy stałych C i H. Kolejne odcienie będą równomiernie jaśniejsze i nie zmienią barwy.
- Chromę trzymaj umiarkowaną, np. od 0.1 do 0.2. Bardzo wysokie wartości wychodzą poza możliwości wielu ekranów i zostaną przycięte.
- Nowe kolory z istniejących twórz przez
color-mix(in oklch, …). Mieszanie w tej przestrzeni daje ładniejsze kolory pośrednie niż w sRGB.
Powiązane hasła
#- hsl()Zapisuje kolor przez odcień na kole barw, nasycenie i jasność. Łatwo w nim rozjaśnić, przyciemnić albo stonować kolor.
- rgb()Zapisuje kolor jako mieszankę światła czerwonego, zielonego i niebieskiego, z opcjonalną przezroczystością. Obejmuje też zapis hex.
- color-mix()Miesza dwa kolory w podanych proporcjach i wybranej przestrzeni barw. Tworzy jaśniejsze, ciemniejsze i półprzezroczyste warianty.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- linear-gradient()Tworzy płynne przejście kolorów wzdłuż prostej linii. Używa się go jako obrazu, najczęściej w background lub background-image.
Widzisz błąd albo brakuje przykładu? Napisz do nas.