Guides om farver
Korte, praktiske guides om farver på skærm: formater, kontrast, paletter, mørk tilstand og CSS. Alle tal er beregnet, og alle eksempler kan kopieres.
- OKLCH forklaret: farveformatet, der endelig passer til dine øjneOKLCH beskriver en farve ud fra, hvor lys den ser ud, hvor farvestærk den er, og hvilken farvetone den har. I modsætning til HSL ser samme lyshedsværdi lige lys ud for alle farvetoner, så paletter, hover-tilstande og tilgængelig kontrast bliver forudsigelige.28. september 20263 min. læsetid
- APCA vs WCAG 2: hvilket kontrasttjek kan du stole påKontrastforholdet i WCAG 2 er det, loven kræver. APCA er en nyere model, der forudsiger læsbarhed langt bedre, især i mørke temaer og med mættede farver. Tjekker du begge, får du tekst, der både lever op til kravene og faktisk er let at læse.28. september 20263 min. læsetid
- Farveomfang forklaret: sRGB, Display P3 og farver uden for gamutEt farveomfang (gamut) er de farver, en skærm eller et farverum kan vise. Nettet blev bygget på sRGB, men de fleste telefoner og mange bærbare viser nu Display P3, som har tydeligt mere intense røde, grønne og orange farver.28. september 20262 min. læsetid
- Farveformater forklaret: HEX, RGB, HSL, OKLCH og restenDen samme farve kan skrives på et dusin måder. Her kan du se, hvad hvert format betyder, hvornår du skal bruge det, og hvordan den samme farve ser ud i dem alle.28. september 20262 min. læsetid
- HEX-farvekoder forklaret: sådan virker #RRGGBBEn HEX-farvekode som #1e90ff er tre par hexadecimale cifre: mængden af rødt, grønt og blåt lys, hver fra 00 (intet) til ff (fuldt, 255). Tilføj et fjerde par for at angive opacitet: 80 betyder omkring 50 %, ff betyder helt dækkende.28. september 20266 min. læsetid
- Sådan vælger du en farvepalet til en hjemmeside eller appStart med én brandfarve, generér en skala fra 50 til 950 ud fra den, tilføj let tonede grå og fire statusfarver, og test derefter alle tekstpar for kontrast og farveblindhed. Vælg trin ud fra deres OKLCH-lyshed, ikke efter øjemål: på hvid baggrund består tekst WCAG AA, så snart lysheden falder til omkring 0,55, uanset farvetone.28. september 20266 min. læsetid
- Farver til mørk tilstand: sådan vælger du baggrund, tekst og accentfarverBrug en mørkegrå baggrund som #121212 i stedet for ren sort, brudt hvid tekst som #e5e5e5 i stedet for ren hvid og lysere, mindre mættede udgaver af dine brandfarver. Tjek teksten med APCA og ikke kun med WCAG 2, fordi WCAG 2 overvurderer kontrasten på mørke baggrunde.28. september 20266 min. læsetid
- Farveharmonier: komplementære, analoge, triadiske farver og flereEn farveharmoni vælger farvetoner med faste vinkler på et farvehjul: 180° fra hinanden for komplementære farver, 30° for analoge og 120° for triadiske. Drej farvetonen i OKLCH i stedet for HSL, så forbliver farverne lige lyse, og ingen enkelt farvetone springer i øjnene ved et uheld.28. september 20265 min. læsetid
- CSS color-mix() og relative farver: lyse nuancer, hover og gennemsigtighedcolor-mix() blander to farver i et farverum, du selv vælger, og relativ farvesyntaks lader dig ændre én kanal i en eksisterende farve, fx oklch(from var(--brand) calc(l - 0.1) c h). Begge dele kører i browseren, virker med CSS-variabler og erstatter de fleste farvefunktioner i Sass. Bland i oklab til lyse nuancer og hover og i srgb til gennemsigtighed.28. september 20266 min. læsetid
- Paletter til farveblinde: sådan tjekker og retter du dine farverEn palet til farveblinde sørger for, at alle farvepar kan skelnes ved protanopi, deuteranopi, tritanopi og i gråtoner. Den mest pålidelige løsning er ikke en særlig farvetone, men en forskel i lyshed: farver med omkring 0,2 imellem sig i OKLCH-lyshed forblev tydeligt forskellige i alle vores simuleringer. Kombinér det med ikoner eller tekst, for farve alene svigter altid nogen.28. september 20266 min. læsetid
- Farver i Tailwind CSS: v4-paletten i OKLCH, egne farver og nuancerTailwind CSS v4 leveres med 26 farveskalaer på hver 11 nuancer fra 50 til 950, i alt 286 farver defineret i OKLCH som CSS-variabler som --color-blue-500. Egne farver tilføjer du med @theme { --color-brand-500: oklch(...) }. Samme trinnummer betyder ikke samme lyshed: blue-600 er den lyseste blå, der når 4,5:1 på hvid, mens yellow kræver 700.28. september 20266 min. læsetid