Webfarver: Hvad er RGB, hex og sRGB? Definition og forklaring
Få en klar guide til webfarver: hvad RGB, hex og sRGB betyder, hvordan de bruges, og hvorfor korrekt farvegengivelse er vigtig for webdesign og print.
Webfarver er de farver, der anvendes til at designe websider, og de måder, hvorpå disse farver beskrives og opregnes.
Der er flere måder at vælge farver til dele af websiderne på. Farver kan angives som en RGB-triplet (et sæt af tre tal) i hexadecimalt format (en hex-triplet). RGB-triplet kan danne 16 777 216 forskellige farver. Mange almindelige farver kan også vælges ud fra deres almindelige engelske navne. Ofte bruges et farveværktøj eller anden grafiksoftware til at skabe farveværdier.
De første versioner af Mosaic og Netscape Navigator brugte X11-farvenavnene som grundlag for deres farvelister. Det skyldes, at de begge startede som X Window System-programmer.
Hver webfarve har sin egen definition, sRGB. Dette vedrører kromaticiteterne i et enkelt fosfor-sæt, en given overførselskurve, et adaptivt hvidpunkt og visningsbetingelser. Disse er udvalgt til at ligne mange reelle skærme og visningsbetingelser i den virkelige verden. Selv uden farvestyring er de farver, der skabes, ret tæt på de givne værdier. Brugeragenterne kan dog være forskellige i den nøjagtighed, hvormed de viser farverne. Bedre brugeragenter bruger farvehåndtering til at skabe bedre farvegengivelse. Dette er vigtigt for web-to-print-applikationer.
RGB, hex og farvenavne — hvordan det virker
RGB står for Red, Green og Blue. En RGB-triplet består af tre værdier, hver typisk i intervallet 0–255. Kombinationen af disse tre kan beskrive over 16 millioner farver (256 × 256 × 256 = 16.777.216). I praksis anvendes disse værdier i flere formater på web:
- Hex-triplet: Skrivning i hexadecimalt format som #RRGGBB. Eksempel: #FF0000 er rent rød, #00FF00 er grønt, #0000FF er blåt. Der findes også kort notation som #F00 for #FF0000.
- rgb() / rgba(): CSS-funktioner som rgb(255, 0, 0) eller rgba(255, 0, 0, 0.5) hvor alfa (gennemsigtighed) kan angives.
- Procent-notation: rgb(100%, 0%, 0%) svarer til rgb(255,0,0).
- Farvenavne: Mange almindelige farver kan bruges ved navn i CSS (fx red, blue, lightseagreen). Disse navnene stammer historisk fra X11/CSS farvelister.
sRGB og farvestyring
sRGB er en standardiseret farverum, valgt fordi det ligger tæt på farvegengivelsen for mange almindelige skærme og normale visningsbetingelser. Nogle vigtige punkter om sRGB:
- sRGB har et specifikt hvidpunkt (D65), kromaticiteter for primærfarverne og en overførselskurve (ofte omtalt som en gamma ≈ 2,2). Standarden er formaliseret i bl.a. IEC 61966-2-1.
- Browsere og systemer uden farvestyring antager ofte, at billeder og farveværdier er i sRGB; derfor vises farver rimeligt konsekvent selv uden profilhåndtering.
- Moderne, farvestyrede brugeragenter (browsere, billedbehandlingsprogrammer og operativsystemer) kan bruge indlejrede ICC-profiler eller konvertere mellem farverum, så farverne matcher bedre mellem skærme og tryk (web-to-print).
- Mange professionelle farverum (fx Adobe RGB, ProPhoto RGB) har større farvegamut end sRGB, men hvis disse ikke konverteres korrekt, kan farverne se forkerte ud i en browser, der antager sRGB.
Historik og farvenavne
De tidlige webbrowsere som Mosaic og Netscape Navigator brugte X11-farvenavne som reference, fordi de var udviklet i et miljø, hvor X Window-systemet var centralt. Det er grunden til, at nogle CSS-farvenavne stammer fra den gamle X11-liste.
Praktiske råd og best practices
- Brug sRGB til web: Gem billeder og vælg farver i sRGB, medmindre du har en bestemt grund til andet. Det giver mest forudsigelig visning på forskellige enheder.
- Indlejrede profiler: Hvis du arbejder professionelt med billeder, indlejres ICC-profiler ofte i billedfilerne. Moderne browsere håndterer disse profiler bedre, men test altid i målgruppen af browsere.
- Test kontrast: Sørg for god kontrast mellem tekst og baggrund (følg fx WCAG-retningslinjer) så indhold er læsbart for alle brugere.
- Vær opmærksom på enhedsforskelle: Skærme varierer i kalibrering, lysstyrke og gamut. Kalibrer dine arbejdsmonitore for mere nøjagtige resultater, især ved tryk.
- Farveværktøjer: Brug farvevælgere i grafiksoftware eller browserudviklerværktøjer til at hente hex-, rgb- eller HSL-værdier og til at teste farvekombinationer.
- Overvej HSL/HSLA: CSS understøtter også hsl() og hsla() som kan være nemmere at arbejde med, når du vil justere nuance, mætning eller lyshed.
- Gennemsigtighed og moderne formater: Ud over rgba() findes også hex8 (#RRGGBBAA) i visse sammenhænge; husk browserkompatibilitet ved brug.
Afsluttende bemærkninger
Webfarver kombinerer teknisk præcision (talværdier og standarder) med designmæssige valg (farveharmoni, kontrast og tilgængelighed). For det meste er sRGB og hex-/rgb-notationerne tilstrækkelige til at opnå konsistente resultater på tværs af moderne browsere og skærme, men når farvenøjagtighed er kritisk (fx ved tryk), bliver korrekt farvestyring og profilkonvertering vigtig.
Hex-triplet
En hex-triplet er et sekscifret tal på tre byte, der bruges i HTML, CSS, SVG og andre computerprogrammer til at repræsentere farver. Bytterne repræsenterer den røde, grønne og blå del af farven. En byte repræsenterer et tal i intervallet 00 til FF, eller 0 til 255 i decimal notation. Dette repræsenterer den mindste (0) til den største (255) intensitet af hver af farvekomponenterne. Hex-tripletten dannes ved at sammenkæde tre bytes i hexadecimal notation i følgende rækkefølge:
Byte 1: rød værdi (farvetype rød)
Byte 2: grøn værdi (farvetype grøn)
Byte 3: blå værdi (farvetype blå)
For eksempel en farve, hvor de røde/grønne/blå værdier er decimaltal: rød=36, grøn=104, blå=160 (en grålig-blå farve). Decimaltallene 36, 104 og 160 svarer til henholdsvis tallene 24, 68 og A0. Hex-triplet fås ved at kombinere de 6 hexadecimale tal sammen, 2468A0 i dette eksempel.
HTML webfarver
Den blev udviklet i 1997 og var oprindeligt i 16 farver. Senere blev der tilføjet orange, så der var i alt 17 farver. De oprindelige 16 var en del af noget, der kaldes "Windows VGA-skabelonen", hvilket betyder, at det er de farver, der kan bruges til handlinger som f.eks. fremhævning.
| Farve | Hexadecimalt | Farve | Hexadecimalt | Farve | Hexadecimalt | Farve | Hexadecimalt |
| aqua | #00FFFFFF | grå | #808080 | marineblå | #000080 | sølv | #C0C0C0C0 |
| sort | #000000 | grøn | #008000 | #808000 | krikand | #008080 | |
| blå | #0000FF | kalk | #00FF00 | lilla | #800080 | hvid | #FFFFFFFF |
| #FF00FF | maroon | #800000 | rød | #FF0000 | gul | #FFFF00 |
Liste over HTML-farvenavne
Tabellen nedenfor indeholder alle 140 HTML-farver. Alle moderne browsere understøtter dem.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
X11-farver (formuleret i 1987)
Disse kaldes "X11-webfarver" siden opfindelsen af World Wide Web i 1991.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Diagram over udvalgte webfarver
Dette diagram viser udvalgte HTML- og X11-farver samt udvalgte uofficielle konsensusfarver, der er udviklet af webdesignere siden 2002. Ved indtastning af kode, der anvender de uofficielle farver, skal man angive farvens hex-kode i stedet for at skrive farvens navn.
Webfarver (liste) | |||||||||||||||||||
| Pink | Rød | Maroon | Brun | Misty Rose | Laks | Koral | Orange-rød | Chokolade | Guld | Elfenben | Gul | Olive | Plæne grøn | ||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Lime | Grøn | Forårsgrønt | Turkis | Azure | Aqua/Cyan | Krikand | Blå | Navy | Mørk violet | Plum | Lilla | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Tan | Beige | Grå skifer | Mørk skifergrå | Hvid | Hvid røg | Lysegrå | Sølv | Mørkegrå | Grå | Dim Gray | Sort | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
| ||||||||
Spørgsmål og svar
Spørgsmål: Hvad er webfarver?
A: Webfarver er farver, der anvendes ved udformning af websider, og de måder, hvorpå disse farver beskrives og opregnes.
Spørgsmål: Hvor mange forskellige farver kan man skabe med RGB-tripletter?
Svar: RGB-tripletter kan danne 16 777 216 forskellige farver.
Spørgsmål: Er der almindelige engelske navne for nogle af disse farver?
Svar: Ja, mange almindelige farver kan også vælges ud fra deres almindelige engelske navne.
Q: Hvilken software bruges typisk til at skabe farveværdier?
A: Ofte bruges et farveværktøj eller anden grafiksoftware til at skabe farveværdier.
Spørgsmål: Hvad var grundlaget for de oprindelige farvelister for Mosaic og Netscape Navigator?
Svar: De første versioner af Mosaic og Netscape Navigator brugte X11-farvenavnene som grundlag for deres farvelister, fordi de begge startede som X Window System-programmer.
Spørgsmål: Hvad er sRGB relateret til, når det gælder webfarver?
Svar: Hver webfarve har sin egen definition, sRGB, som vedrører kromaticiteterne i et enkelt fosforsæt, en given overførselskurve, et adaptivt hvidpunkt og betragtningsbetingelser.
Spørgsmål: Hvordan viser brugeragenterne disse farver nøjagtigt?
Svar: Bedre brugeragenter bruger farvehåndtering til at skabe bedre farvegengivelse, hvilket er vigtigt for web-to-print-applikationer.
Søge