Farver i CSS

 

Farvelægning er en af de mest essentielle funktioner i CSS. Stort set alle elementer kan blive givet en farve – og valget af farver er stort set ubegrænset. På denne side vil de vigtigste farvekoder blive gennemgået. Det inkluderer prædefinerede farver, hexadecimal farver, RGB farver og HSL farver. Derudover vil det også blive gennemgået, hvordan man skelner forskellen på elementets forgrund og baggrund, da det har stor betydning for, hvad det er der bliver farvelagt.

 

Forgrunds- og baggrundsfarve

Når man farvelægger et element er det de følgende to dele af elementet der kan blive farvelagt:

1. Forgrundsfarve: Her skal man benytte erklæringen color. Forgrundsfarven angiver selve elementets farve.
2. Baggrundfarve: Her skal man benytte erklæringen background-color Baggrundsfarven angiver den farve som er bag elementet.

Nedenstående tekst har en rød baggrundfarve og en blå forgrundsfarve:

Farver i CSS

 

Prædefinerede farver

Den nemmeste måde at angive farver på er ved at benytte de farver, som allerede er prædefinerede i CSS-sproget. Når man skal angive værdien for den farve man vil have, så kan man gøre det på simpelt engelsk. Bl.a. er farverne red, blue, yellow, green, black og white understøttet. Der er i alt 140 prædefinerede farver i CSS. I nedenstående eksempel har tagget <h2> fået baggrundsfarven DodgerBlue og forgrundsfarven Tomato:

h2 {
  background-color: DodgerBlue;
  color: Tomato; 
}

Kodestykket vil resultere i en overskrift som ser sådan her ud:

Farver i CSS

Listen over alle 140 prædefinerede farver kan ses her:

 

Hexadecimal farver

Hexidecimal farver repræsenterer et meget større udvalg af farver, som kan benyttes i CSS – i alt er der faktisk 16.777.216 forskellige farver, som kan skabes.

En hexidecimal farve er specificeret med et nummertegn (#) efterfulgt af 6 tal eller bogstaver: #RRGGBB. 

De to første cifre (RR) bestemmer intensiteten af den røde farve. De to næste cifre (GG) bestemmer intensiteten af den grønne farve. De to sidste cifre (BB) bestemmer intensiteten af den blå farve.

Intensiteten går fra “00”, som er det laveste, til “FF”, som er det højeste.

For at finde den rigtige hexadecimal-farve som du vil benytte, kan du klikke her. Denne hjemmeside lader dig vælge en farve og giver dig hexadecimal-cifrene, som du så kan kopiere ind i din CSS-fil.

I nedenstående eksempel er et overskrift-element blevet farvelagt med to hexadecimal-koder:

h2 {
  background-color: #daffd4;
  color: #f318f3; 
}

Koden vil resultere i en overskrift med en limegrøn baggrundfarve og en lyserød forgrundsfarve:

Farver i CSS

 

RGB farver

RGB står for Red, Green og Blue. RGB farver følger det samme system som hexadecimal farver – bare på en lidt anden facon. Ligesom med hexadecimal farver, så kan man også skabe 16.777.216 forskellige RGB farver. Koden for en RGB farve består af rgb efterfulgt af tre værdier indeni et parentes som bestemmer henholdvis intensiteten af den røde farve, intensiteten af den grønne farve og intensiteten af den blå farve. Tallet kan være alt fra 0 til 255, hvor 0 er lav intensitet og 255 er høj intensitet. Det vil se sådan her ud i et kodestykke:

h2 {
  color: rgb(73, 35, 226); 
}

Ovenstående eksempel vil resultere i en meget blålig overskrift:

Farver i CSS

For at finde den rigtige RGB farve som du vil benytte, kan du klikke her. Denne hjemmeside lader dig vælge en farve og giver dig farvens RGB værdier, som du så kan kopiere ind i din CSS-fil.

 

HSL farver

HSL står for Hue, Saturation og Lightness. Koden for en HSL farve består af hsl efterfulgt af tre værdier indeni et parentes. Den første værdi er nuancegraden og kan være alt mellem 0 og 360. Den anden er et procenttal der indikerer farvemætning og den tredje værdi er et procenttal der indikerer lys. Det vil se sådan her ud i et kodestykke:

h2 {
  color: hsl(350, 30%, 70%); 
}

Ovenstående eksempel vil resultere i en overskrift med en meget rødlig farve:

Farver i CSS

For at vide hvilken farve som nuancegraden resulterer i, kan man tage et kig på et farvehjul:

Med HSL farver kan man tilføje en fjerde værdi som indikerer farvens gennemsigtighed. For at gøre dette skal man erstatte hsl med hsla (a’et står for “Alpha”). Den fjerde værdi skal være et decimaltal mellem 0 og 1. Hvis værdien er 0 så vil farven være helt gennemsigtig. Hvis værdien er 1, så vil farven overhovedet ikke være gennemsigtig. Det vil se sådan her ud i et kodestykke:

h2 {
  color: hsla(350, 30%, 70%, 0.5); 
}

Ovenstående eksempel vil resultere i en overskrift som er halvt gennemsigtig:

Farver i CSS

Grunden til at farven ser meget hvid ud, er selvfølgelig fordi denne hjemmesides baggrundsfarve er helt hvid.

For at finde den rigtige HSL farve som du vil benytte, kan du klikke her. Denne hjemmeside lader dig vælge en farve og giver dig farvens HSL værdier, som du så kan kopiere ind i din CSS-fil.

 

Gå videre til Typografi i CSS her →