CSS-farver

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

CSS-Farver

Farverne er vist, kombineret med RØD, GRØN og BLÅT lys

Farve Værdier

CSS farver er defineret ved hjælp af en hexadecimal (hex) notation for en kombination af rød, grøn og blå farveværdier (RGB). Den laveste værdi, der kan blive givet til én af de lyskilderne er 0 (hex 00). Den højeste værdi er 255 (hex FF).

Hex værdier skrives som 3 tocifrede tal, som starter med et # tegn.

Eksempel

<html>
<body>

<p style="background-color:#FFFF00">
Farve angives ved hjælp af hex værdi
</p>

<p style="background-color:rgb(255,255,0)">
Farve angives ved hjælp af RGB-værdi
</p>

<p style="background-color:yellow">
Farven indstilles ved hjælp af farvens navn
</p>

</body>
</html>

Alle 3 eksempler vil få følgende udseende:

Farve angives ved hjælp af hex værdi

16 Millioner Forskellige Farver

Kombinationen af ​​rød, grøn og blå værdier fra 0 til 255 giver i alt mere end 16 millioner forskellige farver at lege med (256 x 256 x 256).

De fleste moderne skærme er i stand til at vise mindst 16384 forskellige farver.

Forskellige metoder til at angive farver i CSS

Den normale måde at angive farver på er ved 3 hexadecimale tal efter hinanden, men man kan angive farver ved følgende metoder [1]:

  • Hexadecimale farver
  • RGB-farver
  • RGBA-farver
  • HSL-farver
  • HSLA-farver
  • Foruddefinerede/cross-browser farvenavne

Som nævnt er den hexadicemale metode et #-tegn efterfulgt af 3 to cifrede hexadecimale tal, der står for indholdet af hhv. Red, Green og Blue (derfor bruger man også tit betegnelsen RGB for denne metode). Det kan f.x. være:

#FF803C

RGB-farven angiver de 3 farver på samme måde med 3 tal, her er det blot decimale tal, og det skrives som følger:
rgb(255, 128, 60) eller

rgb(100%, 50%, 24%)

RGBA-farven er en udvidelse af rgb-systemet, der kun virker i nyere browsere som IE9+, FireFox 3+, Chrome, Safari, og Opera 10+. Der angives stadig de 3 RGB farver, men også en alpha (gennemsigtighed), hvor 0.0 er helt gennemsigtigt og 1.0 slet ikke er gennemsigtigt. Der kan f.x. være:

rgba(255, 128, 60, 0.5)

HSL-farven står for hue, saturation og lightness - og er en cylindrisk-koordinat måde at repræsentere farverne på. Det kan f.x. være:

hsl(120, 65%, 75%)

Det første tal hue går fra 0 til 360 (som en vinkel), hvor 0 er rød, 120 er grøn og 240 er blå, og vinklerne mellem dem er blandingsfarverne.

Det næste tal er mætningen (saturation) og det går fra 0% til 100%, hvor de 0% slet ikke indeholder noget af farven (den vil være grå), og 100% er farven fuldt ud.

Det sidste tal er hvor lys farven er (lightness) og det går også fra 0% over 50% til 100%. Ved 0% er det helt sort, ved 50% er det farven fuldt ud, og ved 100% er det helt hvidt.

HSLA-farven er en udvidelse af HSL-farven ligesom RGBA er en udvidelse af RGB, og det er igen gennemsigtighed der er lagt på. Det kan f.x. være:

hsla(120, 65%, 75%, 0.5)


Både HSL-farver og HSLA-farver virker kun i nyere browsere som IE9+, FireFox 3+, Chrome, Safari, og Opera 10+.

Den sidste måde at angive farver på er ved deres navne, som red, green, yellow osv. Alle 147 farver kan læses og ses på www.w3schools.com farvenavne.

Referencer