Guider om farger
Korte, praktiske guider om farger på skjerm: formater, kontrast, paletter, mørk modus og CSS. Hvert tall er regnet ut, og hvert eksempel kan kopieres.
- OKLCH forklart: fargeformatet som endelig stemmer med øyetOKLCH beskriver en farge ut fra hvor lys den ser ut, hvor fargesterk den er og hvilken fargetone den har. I motsetning til HSL ser samme lyshetsverdi virkelig like lys ut for alle fargetoner, og det gjør paletter, hover-tilstander og lesbar kontrast forutsigbare.28. september 20263 min lesetid
- APCA mot WCAG 2: hvilken kontrastsjekk kan du stole på?Kontrastforholdet i WCAG 2 er det loven krever. APCA er en nyere modell som forutsier lesbarhet mye bedre, særlig i mørke temaer og med mettede farger. Sjekker du begge, får du tekst som både oppfyller kravene og faktisk er lett å lese.28. september 20263 min lesetid
- Fargeomfang (gamut) forklart: sRGB, Display P3 og farger utenforFargeomfanget (gamut) er settet av farger en skjerm eller et fargerom kan vise. Nettet ble bygget på sRGB, men de fleste mobiler og mange bærbare viser nå Display P3, som har merkbart klarere røde, grønne og oransje farger.28. september 20262 min lesetid
- Fargeformater forklart: HEX, RGB, HSL, OKLCH og restenDen samme fargen kan skrives på et dusin måter. Her ser du hva hvert format betyr, når du bør bruke det og hvordan den samme fargen ser ut i alle sammen.28. september 20262 min lesetid
- HEX-fargekoder forklart: slik fungerer #RRGGBBEn HEX-fargekode som #1e90ff består av tre par heksadesimale sifre: mengden rødt, grønt og blått lys, hver fra 00 (ingenting) til ff (fullt, 255). Legg til et fjerde par for opasitet: 80 betyr omtrent 50 %, ff betyr helt dekkende.28. september 20266 min lesetid
- Slik velger du fargepalett til en nettside eller appStart med én profilfarge, lag en skala fra 50 til 950 ut fra den, legg til svakt tonede gråtoner og fire statusfarger, og test deretter hvert tekstpar for kontrast og fargeblindhet. Velg nyanser ut fra OKLCH-lyshet, ikke på øyemål: på hvit bakgrunn består tekst WCAG AA når lysheten er nede i rundt 0,55, uansett fargetone.28. september 20266 min lesetid
- Farger til mørk modus: slik velger du bakgrunn, tekst og aksentfargerBruk en mørkegrå bakgrunn som #121212 i stedet for helt svart, brukket hvit tekst som #e5e5e5 i stedet for helt hvit, og lysere, mindre mettede versjoner av profilfargene dine. Sjekk teksten med APCA i tillegg til WCAG 2, fordi WCAG 2 overvurderer kontrasten på mørke bakgrunner.28. september 20266 min lesetid
- Fargeharmonier: komplementære, analoge, triadiske farger og flereEn fargeharmoni velger fargetoner med faste vinkler på en fargesirkel: 180° fra hverandre for komplementær, 30° for analog og 120° for triadisk. Roterer du fargetonen i OKLCH i stedet for HSL, blir fargene like lyse, så ingen fargetone stikker seg ut ved et uhell.28. september 20265 min lesetid
- CSS color-mix() og relative farger: lysere nyanser, hover og transparenscolor-mix() blander to farger i et fargerom du velger, og med relativ fargesyntaks endrer du én kanal i en eksisterende farge, for eksempel oklch(from var(--brand) calc(l - 0.1) c h). Begge kjører i nettleseren, virker med CSS-variabler og erstatter de fleste fargefunksjonene i Sass. Bland i oklab for lysere nyanser og hover, og i srgb for transparens.28. september 20266 min lesetid
- Fargeblindvennlig palett: slik sjekker og retter du fargeneEn fargeblindvennlig palett sørger for at alle fargepar kan skilles fra hverandre ved protanopi, deuteranopi, tritanopi og i gråtoner. Den sikreste løsningen er ikke en spesiell fargetone, men en forskjell i lyshet: farger med rundt 0,2 i forskjell i OKLCH-lyshet holdt seg tydelig adskilt i alle simuleringene vi kjørte. Kombiner det med ikoner eller etiketter, for farge alene svikter alltid for noen.28. september 20266 min lesetid
- Tailwind-farger: OKLCH-paletten i v4, egne farger og nyanserTailwind CSS v4 kommer med 26 fargeskalaer med 11 nyanser hver, fra 50 til 950, til sammen 286 farger definert i OKLCH som CSS-variabler, for eksempel --color-blue-500. Du legger til egne med @theme { --color-brand-500: oklch(...) }. Samme nyansenummer betyr ikke samme lyshet: blue-600 er den lyseste blåfargen som når 4,5:1 mot hvitt, mens gul trenger 700.28. september 20266 min lesetid