Guider om färg

Korta, praktiska guider om färg för skärmar: format, kontrast, paletter, mörkt läge och CSS. Varje siffra är uträknad, varje exempel går att kopiera.

OKLCH förklarat: färgformatet som äntligen stämmer med ögatOKLCH beskriver en färg utifrån hur ljus den ser ut, hur färgstark den är och vilken färgton den har. Till skillnad från HSL ser samma ljushetsvärde verkligen lika ljust ut för alla färgtoner, vilket gör paletter, hover-lägen och tillgänglig kontrast förutsägbara.28 september 20263 min läsning
APCA eller WCAG 2: vilken kontrastkontroll ska du lita påKontrastförhållandet i WCAG 2 är det som lagen kräver. APCA är en nyare modell som förutsäger läsbarhet mycket bättre, särskilt i mörka teman och med mättade färger. Kontrollerar du båda får du text som uppfyller kraven och dessutom är lätt att läsa.28 september 20263 min läsning
Färgomfång förklarat: sRGB, Display P3 och färger utanför omfångetEtt färgomfång (gamut) är den mängd färger som en skärm eller en färgrymd kan visa. Webben byggdes på sRGB, men de flesta mobiler och många bärbara datorer visar i dag Display P3, som har märkbart intensivare röda, gröna och orange toner.28 september 20262 min läsning
Färgformat förklarade: HEX, RGB, HSL, OKLCH och restenSamma färg kan skrivas på ett dussin sätt. Här ser du vad varje format betyder, när du ska använda det och hur samma färg ser ut i dem alla.28 september 20262 min läsning
Hex-färgkoder förklarade: så fungerar #RRGGBBEn hex-färgkod som #1e90ff består av tre par hexadecimala siffror: mängden rött, grönt och blått ljus, var och en från 00 (inget) till ff (fullt, 255). Lägg till ett fjärde par för att ställa in opaciteten: 80 betyder ungefär 50 %, ff betyder helt täckande.28 september 20266 min läsning
Så väljer du färgpalett för en webbplats eller appBörja med en varumärkesfärg, generera en skala från 50 till 950, lägg till svagt tonade gråtoner och fyra semantiska färger och testa sedan varje textpar för kontrast och färgblindhet. Välj steg efter ljushet i OKLCH, inte på känn: på vit bakgrund klarar text WCAG AA när ljusheten sjunker till ungefär 0,55, oavsett färgton.28 september 20266 min läsning
Färger för mörkt läge: så väljer du bakgrund, text och accenterAnvänd en mörkgrå bakgrund som #121212 i stället för helt svart, bruten vit text som #e5e5e5 i stället för helt vit och ljusare, mindre mättade versioner av dina varumärkesfärger. Kontrollera texten med APCA och inte bara med WCAG 2, eftersom WCAG 2 överskattar kontrasten på mörka bakgrunder.28 september 20266 min läsning
Färgharmonier: komplementfärger, analoga, triadiska och flerEn färgharmoni väljer färgtoner med fasta vinklar på ett färghjul: 180° isär för komplementfärger, 30° isär för analoga, 120° isär för triadiska. Vrid färgtonen i OKLCH i stället för HSL, så blir färgerna lika ljusa och ingen färgton sticker ut av misstag.28 september 20265 min läsning
CSS color-mix() och relativa färger: toningar, hover och transparenscolor-mix() blandar två färger i en färgrymd som du väljer, och relativ färgsyntax låter dig ändra en kanal i en befintlig färg, till exempel oklch(from var(--brand) calc(l - 0.1) c h). Båda körs i webbläsaren, fungerar med CSS-variabler och ersätter de flesta färgfunktioner i Sass. Blanda i oklab för toningar och hover, i srgb för transparens.28 september 20266 min läsning
Färgblindvänliga paletter: så testar och rättar du dina färgerEn färgblindvänlig palett gör att varje färgpar går att skilja åt vid protanopi, deuteranopi, tritanopi och i gråskala. Den säkraste lösningen är ingen speciell färgton utan en skillnad i ljushet: färger som skiljer sig med cirka 0,2 i OKLCH-ljushet höll isär i alla simuleringar vi körde. Komplettera med ikoner eller etiketter, eftersom färg ensam alltid sviker någon.28 september 20266 min läsning
Tailwind CSS-färger: OKLCH-paletten i v4, egna färger och nyanserTailwind CSS v4 har 26 färgskalor med 11 nyanser vardera, från 50 till 950, totalt 286 färger definierade i OKLCH som CSS-variabler som --color-blue-500. Egna färger lägger du till med @theme { --color-brand-500: oklch(...) }. Samma stegnummer betyder inte samma ljushet: blue-600 är den ljusaste blå som klarar 4,5:1 mot vitt, medan gult kräver 700.28 september 20266 min läsning