Farveskemaerne HEX og RGB

Introduktion til farver på computerskærme

For ikke så længe siden, var det nødvendigt at begrænse hjemmesidens farvevalg til hvad man kalder "websafe colors". Grunden var, at computerskærme ganske enkelt ikke kunne gengive lige så mange forskellige farver som de kan i dag. Man havde derfor et begrænset udvalg på 256 forskellige farver at vælge mellem, hvis man ville være sikker på, at alle computerskærme kunne gengive den valgte farve på samme måde.

Begrænsningen på 256 mulige farver var imidlertid udelukkende betinget af datidens teknologiske udvikling - principielt kan farveskemaet der nruges til at blande skærmfarver - kaldet sRGB - give mange millioner forskellige farver ved at blande de 3 grundfarver Rød - Grøn - Blå (RGB) i forskellige mængder.

sRGB blev udviklet af blandt andet Microsoft i midten af 90'erne til brug for visning af farver på computere. sRGB er siden videreudviklet af andre store it-firmaer som for eksemple Adobe, og der findes i dag flere varianter af sRGB, som hver især har sin egen berettigelse og bruges i forskellige sammenhænge.


HEX

Når jeg bruger farver på min html-side, defineres farven i CSS ved hjælp af en eller flere varianter af sRGB. Det mest brugte farveskema er uden tvivl HEX, som er en omskrivning med hexiadecimaler af RGB - her et eksempel på farven rød blandet med HEX:

	
.box  { 
  	color: #FF0000;
}

Selve matematikken bag omregningen falder lidt uden for målet med artiklen her, så den vil jeg ikke komme nærmere ind på - er man interesseret, kan man læse om det i denne lidt ældre artikel på engelsk.

Blande farver i HEX

HEX-farveskemaet opererer med både tal og bogstaver som værdier for hver af de tre grundfarver - dog med et maksimum af 2 tegn for hver farve, hvor '00' svarer til ingen farve og 'FF' er fuld farve.

Jeg kan bruge 2 tal samtidigt eller 1 tal + 1 bogstav og opnå samme farve:

Tal
  • 00 - UDEN FARVE eller SORT
  • 11
  • 22
  • 33
  • 44
  • 55
  • 66
  • 77
  • &  &  &  - MEDIUM
  • 88
  • 99
  • AA
  • BB
  • CC
  • DD
  • EE
  • FF - FULD FARVE eller HVID
Tal + bogstav
  • 00 - UDEN FARVE eller SORT
  • 1F
  • 2F
  • 3F
  • 4F
  • 5F
  • 6F
  • 7F
  • &  &  &  - MEDIUM
  • 8F
  • 9F
  • AA
  • BB
  • CC
  • DD
  • EE
  • FF - FULD FARVE eller HVID
For at opnå en helt ren og klar grundfarve, indsættes altså værdien FF:
	
.box  { 
  	color: #FF0000;
}

Reduktion af værdien

Farveblandingen kan reduceres fra 6 til 3 værdier, men så mister man samtidig havldelen af de tilgængelige farvenuancer - det kan næsten ikke ses i forskellen på eksemplerne, men den er der:

background: #955;

background: #995959;


RGB

Et andet farveskema der kan bruges i CSS er RGB. Ligesom i HEX er udgangspunktet de tre grundfarver Rød - Grøn - Blå (RGB). Hver af farverne i RGB kan tildeles en værdi mellem '0' og '255', hvilket betyder, at der kan blandes mange millioner forskellige nuancer.

Farveblanding

Indsat i CSS vil en RGB farveblanding for farven rød se sådan ud:
	
.box  {
	background: rgb(255 ,0 ,0);  
}   
Ønsker jeg en ren grøn farve, indsætter jeg i stedet værdien '255' på grøn's plads:
	
.box  {
	background: rgb(0, 255, 0);  
}   

Sort og hvid

Sort opnås ved at indsætte værdien '0' i alle tre farver, mens hvid findes ved at bruge '255' i alle farver:
.box  {
	background: rgb(255, 255, 255);
}

Konvertering af farver

Det kan være nødvendigt at kunne konvertere en farve, så den kan bruges på tværs af farveskemaerne i CSS. Den matematiske omregning bag konverteringen er ikke helt ukompliceret og kan tage tid, når man ikke er et matematisk geni - heldigvis har hjælpsomme og kloge hoveder udviklet værktøjer, der hurtigt klarer omregningen for os.

Online konverteringsværktøj

Indsæt en farveblanding i feltet for enten HEX eller RGB i online-værktøjet hex.colorrrs.com, og kopier.

Læs mere om konvertering af gennemsigtige farver i artiklen "Gennemsigtige farver med opacity og RGBa".