Sintakse boja
| Sintaksa | Primer | Napomene |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Dve heks cifre po kanalu; 8 cifara dodaje alfu. #RGB je skraćeni oblik za #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 po kanalu. Moderna sintaksa koristi razmake i kosu crtu za alfu; oblik sa zarezima i dalje radi. |
| hsl() | hsl(225 76% 50%) | Nijansa u stepenima, zasićenost i svetlina u procentima. Lako se podešava ručno, ali jednake vrednosti svetline ne izgledaju jednako svetlo. |
| hwb() | hwb(225 12% 12%) | Nijansa, belina, crnina: onako kako slikar meša boje. |
| oklch() | oklch(0.51 0.22 266) | Perceptivna svetlina 0–1, hroma, nijansa. Promena L za isti iznos izgleda kao ista promena za svaku nijansu, što ga čini pravim prostorom za generisanje paleta. |
| oklab() | oklab(0.51 0.01 -0.22) | Kartezijanski oblik OKLCH-a. |
| Imenovane | rebeccapurple | 148 imena iz CSS Color Level 4. |
Kontrast
WCAG 2 definiše kontrast kao (L₁ + 0.05) / (L₂ + 0.05) koristeći relativnu luminansu, od 1:1 (identične) do 21:1 (crno na belom). Osnovni tekst zahteva 4.5:1 za AA i 7:1 za AAA; veliki tekst (18 pt, ili 14 pt podebljano) i komponente interfejsa poput ivica i ikona zahtevaju 3:1. Provera prikazuje sve četiri ocene i zamenjuje dve boje da pokaže da je odnos simetričan.
Zašto OKLCH
U HSL-u se žuta i plava sa istom „svetlinom“ ogromno razlikuju po tome koliko svetlo izgledaju, pa palete napravljene u HSL-u imaju neujednačene korake. OKLCH je projektovan tako da jednake numeričke razlike izgledaju jednako. Podržan je u svakom aktuelnom pregledaču, a color-mix() i relativna sintaksa boja rade u njemu. Konvertor označava OKLCH boje koje ispadaju iz sRGB gamuta, jer ih alat ograničava.
Pitanja
Kako da ručno pretvorim hex u RGB?
Podelite šest cifara u parove i svaki pretvorite iz heksa: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). Trocifreni hex udvostručuje svaku cifru (#F80 = #FF8800).
Koji odnos kontrasta mi treba?
4.5:1 za običan tekst i 3:1 za veliki tekst ili komponente interfejsa da bi se zadovoljio WCAG AA; 7:1 i 4.5:1 za AAA. Tekst čuvara mesta i onemogućene kontrole su izuzeti, ali ih ipak vredi proveriti.
Zašto ista hsl() svetlina izgleda različito za različite nijanse?
HSL je geometrijska transformacija RGB-a bez perceptivnog modela; čista žuta (hsl 60 100% 50%) je daleko svetlija od čiste plave (hsl 240 100% 50%) pri istom L. Koristite OKLCH kad su vam potrebni vizuelno ujednačeni koraci.
Šta je alfa kanal?
Neprozirnost, od 0 (providno) do 1 (neprozirno), zapisana posle kose crte u modernoj sintaksi ili kao četvrta vrednost u rgba(). Kontrast se ovde računa na neprozirnoj boji; poluprovidan tekst preko pozadine zahteva stopljeni rezultat.