Webbfärger är färger som används vid utformning av webbsidor, och metoderna för att beskriva och förteckna dessa färger.

Det finns flera sätt att välja färger för delar av webbsidor. Färger kan anges som en RGB-trippel (en uppsättning av tre siffror) i hexadecimalt format (en hex-trippel). RGB-trippel kan ge 16 777 216 olika färger. Många vanliga färger kan också väljas med hjälp av deras vanliga engelska namn. Ofta används ett färgverktyg eller annan grafikprogramvara för att skapa färgvärden.

De första versionerna av Mosaic och Netscape Navigator använde X11-färgnamnen som bas för sina färglistor. Detta berodde på att de båda startade som program i X Window System.

Varje webbfärg har sin egen definition, sRGB. Detta gäller kromaticiteten hos en enskild fosforuppsättning, en given överföringskurva, en adaptiv vitpunkt och betraktningsförhållanden. Dessa har valts ut för att likna många verkliga bildskärmar och betraktningsförhållanden. Även utan färghantering ligger de färger som skapas ganska nära de givna värdena. Användarprogrammen kan dock skilja sig åt när det gäller hur exakt de visar färgerna. Bättre användarprogram använder färghantering för att skapa bättre färgåtergivning. Detta är viktigt för webb-till-tryck-tillämpningar.



 

Format för webbfärger

De vanligaste sätten att ange färger i CSS och HTML är:

  • Hex (hexadecimal): exempelvis #ff0000 för rent rött. Hex består vanligtvis av sex hexadecimala tecken (#RRGGBB). Det finns även en kortform med tre tecken (#RGB) som motsvarar #RRGGBB där varje tecken fördubblas.
  • RGB-funktion: rgb(255, 0, 0) anger rött med tre tal (0–255). Det finns också rgba(r, g, b, a) där a är alfa (transparens) mellan 0 och 1.
  • HSL/HSLA: hsl(0, 100%, 50%) beskriver färg via ton (hue), mättnad (saturation) och ljushet (lightness). hsla lägger till alfa-kanal för transparens.
  • Namnade färger: webbläsare stöder ett antal fördefinierade engelska färgnamn (t.ex. red, blue, lightgray). Moderna specifikationer har ett större set av namngivna färger.

Teknisk bakgrund: RGB, färgrymd och färgdjup

En vanlig RGB-trippel använder 8 bitar per kanal (R, G, B), totalt 24 bitar, vilket ger 2^24 = 16 777 216 möjliga färger. Dessa värden tolkas normalt i sRGB-färgrymden på webben. sRGB definierar kromaticitet (vilka grundfärger som används), en överföringskurva (ungefärlig gamma) och standardvitpunkt (D65). Genom att använda en gemensam färgrymd blir färgerna mer förutsägbara mellan olika enheter.

Färghantering (ICC-profiler) kan användas för att översätta mellan olika skärmar, skrivare och kalibrerade arbetsflöden så att samma färg visas konsekvent. Utan korrekt färghantering kan två olika enheter visa samma siffror som visuellt olika färger.

Färghantering i webbläsare och grafikprogram

  • Moderna webbläsare tolkar sRGB som standard för färger utan explicit profil. Om ett färgformat innehåller en färgprofil (t.ex. en bild med inbäddad ICC-profil) kommer webbläsaren i de flesta fall att försöka hantera profilen korrekt.
  • Grafikprogram och färgverktyg hjälper designers att välja färger, konvertera mellan format (hex, rgb, hsl) och exportera med eller utan färgprofiler.
  • För webb-till-tryck-arbeten är det viktigt att arbeta med arbetsflöden som inkluderar profiler och kalibrerade skärmar för att undvika stora avvikelser vid utskrift.

Tillgänglighet och kontrast

Tillgänglighet är en viktig aspekt vid val av webbfärger. Text mot bakgrund måste ha tillräcklig kontrast för att vara läsbar för personer med nedsatt syn. WCAG (Web Content Accessibility Guidelines) rekommenderar kontrastförhållanden (minst 4.5:1 för normal text och 3:1 för stor text). Det finns verktyg och färgkontroller som mäter kontrast mellan två färger och hjälper dig att välja tillgängliga kombinationer.

Praktiska tips för designers och utvecklare

  • Använd CSS-variabler (custom properties) eller ett designsystem för att hålla färgpaletten konsekvent över en hel sajt.
  • Testa färger på flera skärmar och i olika webbläsare. Mobilskärmar, laptops och professionella skärmar kan skilja sig.
  • Använd HSL när du vill justera ljushet eller mättnad enkelt i kod, eftersom det ofta är mer intuitivt än RGB.
  • För gradienter eller överlagringar, använd rgba eller hsla för kontrollerad transparens.
  • Tänk på färgblindhet: använd inte enbart färg för att förmedla viktig information (lägg till text eller ikoner).
  • Spara och dokumentera färgpaletter så att teammedlemmar lätt kan återanvända samma värden.

Vanliga frågor

Kan jag lita helt på att en färg ser likadan ut för alla användare? Nej. Utseendet beror på skärmtyp, skärminställningar, operativsystemets färghantering och om användaren har kalibrerat sin skärm. sRGB minskar variationen men eliminerar den inte.

Vad är skillnaden mellan hex och rgb? De är två sätt att beskriva samma färgvärde. Hex använder hexadecimala siffror, RGB använder decimala tal. Båda kan representera samma mängd detaljer (i standardimplementationen).

Verktyg och resurser

Det finns många verktyg som hjälper med val och kontroll av webbfärger: färgväljare i bildredigerare, online color pickers, kontrastkontrollverktyg, samt verktyg för att generera tillgängliga färgpaletter och konvertera mellan hex, rgb och hsl.

Genom att förstå formaten, arbeta konsekvent och testa färgerna i riktiga miljöer minskar du risken för överraskningar och skapar en mer tillgänglig och konsekvent webbupplevelse.