Farver i CSS

 

 Artiklen går i dybten med alle de forskellige metoder der kan bruges til angivelse af farver i CSS.


Når du skal definere en farve til noget i CSS (f.eks. på tekst eller en baggrund), så kan det gøres på mange måder. Lad os starte med den helt elementære RGB-information.

RGB er en forkortelse for Red Green Blue og hver farve kan ligge i intervallet 0-255. På den måde kan vi ramme præcist den farve vi har brug for.

Eksempel i CSS
 h1 { color: rgb(0, 0, 255) }


NOTE: Husk altid at angive background-color når du angiver color og omvendt. Det skal til for at overholde standarden inden for CSS!
Her har vi givet h1-tag'et farven blå. Fordi både rød og grøn er sat til 0, og blå er sat til maksimum, bliver farven så blå som det overhovedet er muligt!


 h1 { color: rgb(0, 0, 150) } 


Dette giver en mørkere blå, da vi har dæmpet lidt for mængden af blå i vores farve. Ønsker vi en lysere blå kunne vi f.eks. skrive:

 h1 { color: rgb(100, 100, 255) }

Andre måder at skrive farve-information på
I CSS er det også muligt at angive farverne på andre måder end den viste. I stedet for mængden 0-255, kan vi angive farverne i procent:
 h1 { color: rgb(100%, 39%, 75%) }

Skulle man finde på at angive værdier som ligger uden for mængden, så sættes disse bare til den nærmest tilgængelige værdi.

Således bliver:
 h1 { color: rgb(-90, 300, 60) }

til
 h1 { color: rgb(0, 255, 60) }

Ligeledes med procent, så bliver:
 h1 { color: rgb(140%, -10%, 0%) }

til
 h1 { color: rgb(100%, 0%, 0%) }


Hexadecimaler
Hvis man er træt af at skrive rgb(bla, bla, bla) hver gang, så kan det gøres kortere vha. hexadecimaler (læs mere om det hexadecimale talsystem på http://da.wikipedia.org/wiki/Hexadecimale_talsystem).

Et hex-tal kan antage 16 værdier, fra 0-F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Bruger vi to hexadecimaler, kan vi angive en værdi mellem 0 og 255, hvilket jo er præcist hvad vi skal bruge! :)

Se på tallet 0F. Ligesom 10-tal systemet læses laveste værdi fra højre. Tallet vi har til at stå her bliver på den måde 15 (husk 0). Skriver vi 4F står der pludselig 79. 4E giver på den måde 78, osv. Jeg tror den er feset ind på lystavlen! ;)

Når man skal angive en farve vha. hex i CSS, så starter man med symbolet #. De efterfølgende tal aflæses derefter fra venstre mod højre, #RRGGBB.

 h1 { color: #FF0088 }

Giver således fuld rød, ingen grøn og lidt blå.

Skal man bruge præcise farver kan der også skrives:

 h1 { color: #AF970C }

Men vent! Det kan gøres endnu kortere!

Tager vi det første eksempel med hexadecimaler, så kunne det forkortes til:
 h1 { color: #F08 }


Det udvider din browser nemlig til #FF0088. Ligeledes bliver #45A til #4455AA.

Som en side bemærkning skal det siges at CSS er ligeglad med om du bruger små eller store bogstaver. Du kunne således godt skrive #ab5, hvis du synes det er pænere. Personligt foretrækker jeg det andet! :)


Konstanter
Det sidste vi kommer til at gennemgå er farve-konstanterne i CSS. Nu hvor du har fundet ud af hvordan hex-tal angives, kommer her en oversigt over farve-konstanterne i CSS med hexadecimaler:

 Navn     Hex-tal================aqua     #00FFFFblack    #000000blue     #0000FFfuchsia  #FF00FFgray     #808080green    #008000lime     #00FF00maroon   #800000navy     #000080olive    #808000orange   #FFA500purple   #800080red      #FF0000silver   #C0C0C0teal     #008080white    #FFFFFFyellow   #FFFF00


Ligeledes findes der nogle konstanter fra system-farverne som afhænger af opsætningen af dit operativ system. Disse kan du læse nærmere om på: http://www.w3.org/TR/CSS21/ui.html#system-colors


Kilder
http://www.w3.org/TR/CSS21/syndata.html#color-units

Skrevet af : hermandsen



Skrevet af: hermandsen | Dato : 2004-04-12 13:1 | Læst : 7317 gange