Webbfärger: Definition, RGB, hex, färgnamn och färghantering
Lär dig allt om webbfärger: definitioner, RGB & hex-koder, färgnamn och färghantering för korrekt färgåtergivning online och tryck.
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.
Hex triplet
En hex triplett är ett sexsiffrigt tal med tre byte som används i HTML, CSS, SVG och andra datorprogram för att representera färger. Bytes representerar de röda, gröna och blå delarna av färgen. En byte representerar ett tal i intervallet 00 till FF, eller 0 till 255 i decimalnotering. Detta representerar den lägsta (0) till högsta (255) intensiteten för var och en av färgkomponenterna. Den hexadecimala tripletten bildas genom att tre bytes i hexadecimal notation sammanfogas i följande ordning:
Byte 1: rött värde (färgtyp röd)
Byte 2: grönt värde (färgtyp grön)
Byte 3: blått värde (färgtyp blå)
Tänk till exempel på en färg där de röda/gröna/blåa värdena är decimaltal: röd=36, grön=104, blå=160 (en gråblå färg). Decimalsiffrorna 36, 104 och 160 liknar siffrorna 24, 68 respektive A0. Den hexadecimala tripletten erhålls genom att kombinera de 6 hexadecimala siffrorna tillsammans, 2468A0 i det här exemplet.
HTML-webbfärger
Formulerad 1997, fanns det ursprungligen 16 färger. Senare lades orange till för att få 17 färger. De ursprungliga 16 var en del av något som kallas "Windows VGA-mall", vilket innebär att det är de färger som kan användas för åtgärder som t.ex. markeringar.
| Färg | Hexadecimalt | Färg | Hexadecimalt | Färg | Hexadecimalt | Färg | Hexadecimalt |
| aqua | #00FFFFFF | grå | #808080 | #000080 | silver | #C0C0C0C0 | |
| svart | #000000 | grönt | #008000 | oliv | #808000 | #008080 | |
| blå | #0000FF | kalk | #00FF00 | lila | #800080 | vit | #FFFFFFFF |
| #FF00FF | #800000 | röd | #FF0000 | gul | #FFFF00 |
Förteckning över HTML-färgnamn
Tabellen nedan innehåller alla 140 HTML-färger. Alla moderna webbläsare har stöd för dem.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
X11-färger (formulerade 1987)
Dessa kallas "X11-webbfärger" sedan World Wide Web uppfanns 1991.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Diagram över utvalda webbfärger
Detta diagram visar utvalda HTML- och X11-färger samt utvalda inofficiella konsensusfärger för webben som utvecklats av webbdesigners sedan 2002. När man skriver in kod med de inofficiella färgerna måste man ange hex-kod för färgen i stället för att skriva namnet på färgen.
Webbfärger (lista) | |||||||||||||||||||
| Rosa | Röd | Brun | Misty Rose | Lax | Orange-röd | Choklad | Guld | Elfenben | Gul | Olive | Gräsmatta grön | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Lime | Grön | Vårgrönt | Turkos | Azure | Blå | Plommon | Lila | ||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Tan | Beige | Skiffergrått | Mörk skiffergrått | Vit | Ljusgrå | Silver | Mörkgrå | Grått | Dim Gray | Svart | |||||||||
|
|
|
|
|
|
|
|
|
|
|
|
| ||||||||
Frågor och svar
F: Vad är webbfärger?
S: Webbfärger är färger som används vid utformning av webbsidor och sätt att beskriva och förteckna dessa färger.
F: Hur många olika färger kan skapas med RGB-tripletter?
S: RGB-tripletter kan skapa 16 777 216 olika färger.
F: Finns det vanliga engelska namn för vissa av dessa färger?
S: Ja, många vanliga färger kan också väljas med hjälp av sina vanliga engelska namn.
F: Vilken programvara används vanligtvis för att skapa färgvärden?
S: Ofta används ett färgverktyg eller ett annat grafiskt program för att skapa färgvärden.
F: Vad var grunden för de ursprungliga färglistorna för Mosaic och Netscape Navigator?
S: De första versionerna av Mosaic och Netscape Navigator använde X11-färgnamnen som bas för sina färglistor eftersom de båda startade som X Window System-program.
F: Vad har sRGB för koppling till när det gäller webbfärger?
S: Varje webbfärg har sin egen definition, sRGB, som avser kromaticiteten hos en enda fosforuppsättning, en given överföringskurva, en adaptiv vitpunkt och betraktningsförhållanden.
F: Hur visar användarprogrammen dessa färger på ett korrekt sätt?
S: Bättre användaragenter använder färghantering för att skapa bättre färgåtergivning, vilket är viktigt för webb-till-tryck-tillämpningar.
Sök