Kleuren in CSS
Traditioneel wordt in HTML gebruik gemaakt van RGB en standaard namen om de kleuren van je webbsite op het scherm te krijgen. Elk van de drie componenten Rood, Groen en Blauw is beschikbaar in 256 gradaties (tussentinten), waardoor er 256³ ≈ 16,7 miljoen kleuren kunnen worden weergegeven. Dit is op de meeste beeldschermen het maximaal haalbare.
In het artikel Kleurcodes voor tekst, links en achtergrond wordt uitgelegd hoe je het RGB-model in je website kunt toepassen. Naast het RGB-model worden daar ook de modellen CMYK en HSL besproken.
Op deze bladzijde wordt beschreven op welke manier je kleuren opgeeft in CSS. De aanpak is geldig voor alle CSS-elementen waarmee je kleur kunt instellen: color, background-color, border-color, enz.
Van alle kleurmodellen is RGB het meest gebruikt. Dat is logisch als je kijkt naar de historie, waarin RGB aanvankelijk de
enige methode was op kleur op te geven.
RGB-kleuren geef je op met een standaard-naam of met een hexadecimale code, net zoals in HTML. Die aanpak is vaak lastig omdat
je getallen vaak moet omrekenen van decimaal naar hexadecimaal (en
omgekeerd). Dat zijn we niet gewend.
Het zou handig zijn als je niet meer met hexadecimale getallen zou hoeven werken. In CSS versie 2 en later is dat gerealiseerd door speciale functions, zie onderstaande tabel.
| Naam | Beschrijving | |
| RGB | RGB-kleurenmodel. Kleuren worden aangegeven met een standaardnaam, hexadecimale code of met de function: rgb(rr,gg,bb). Hierin zijn rr, gg en bb de bijdragen van resp. rood, groen en blauw. De waarden geef je op als getal (0 t.m. 255) of als percentage (0% t.m. 100%). Voorbeelden: rgb(127,0,0) is steenrood (maroon) rgb(0%,100%,0%) is lichtgroen (lime) Het RGB-kleurenmodel wordt door alle browsers ondersteund. |
|
| RGBA | RGB-kleurenmodel met alfa-kanaal. Met het alfa-kanaal
wordt de ondoorzichtigheid (opacity) geregeld. Kleuren worden aangegeven met de function: rgba(rr,gg,bb,aa). Hierin zijn rr, gg en bb de bijdragen van resp. rood, groen en blauw. De waarden geef je op als getal (0 t.m. 255) of als percentage (0% t.m. 100%). Met de waarde aa stel je de transparantie in. Het is een getal tussen 0.0 (volledig transparant) en 1.0 (volledig ondoorzichtig). |
|
| HSL | HSL-kleurenmodel. Kleuren worden aangegeven met de function: hsl(hh,ss,ll). Hierin is hh de tint (hue). Dit is een getal (eigenlijk: hoek) tussen 0 en 360; 0 is rood, 120 is groen en 240 is blauw. De kleurverzadiging (saturation) wordt aangegeven met ss. Dat is een percentage tussen 0% (grijs) en 100% (de volle kleur). De helderheid (lightness) geef je aan met ll. Ook dit is een een percentage tussen 0% (zwart) en 100% (wit). |
|
| HSLA | HSL-kleurenmodel met alfa-kanaal. Met het alfa-kanaal
wordt de ondoorzichtigheid (opacity) geregeld. Kleuren worden aangegeven met de function: hsla(hh,ss,ll,aa). Hierin is hh de tint (hue). Dit is een getal (eigenlijk hoek) tussen 0 en 360; 0 is rood, 120 is groen en 240 is blauw. De kleurverzadiging (saturation) wordt aangegeven met ss. Dat is een percentage tussen 0% (grijs) en 100% (de volle kleur). De helderheid (lightness) geef je aan met ll. Ook dit is een een percentage tussen 0% (zwart) en 100% (wit). Ook hier wordt de transparantie ingesteld met aa. Het is een getal tussen 0.0 (volledig transparant) en 1.0 (volledig ondoorzichtig). |
|
| CMYK | CMYK-kleurenmodel. Dit is speciaal bedoeld voor het aansturen van (kwaliteits-)printers. Het resultaat op de printer is eigenlijk onvoorspelbaar en kan op het scherm sterk afwijken van het gewenste eindresultaat op de printer. Dat wordt niet alleen veroorzaakt doordat de kleurbeleving op papier (reflecterend licht) anders is dan op het scherm (geeft zelf licht), maar ook doordat de calibratie van de printer niet noodzakelijk betrouwbaar is. Kleuren worden aangegeven met de function: device-cmyk(cc,mm,yy,kk/aa). De bijdragen van de componenten cyaan, magenta, geel en zwart stel je in met de parameters cc, mm, yy en kk. De optionele parameter aa stelt het alfakanaal (opacity) in, default is 1. Dit zijn getallen of percentages tussen 0.0 (= 0%) en 1.0 (= 100%). De complexiteit van de toepassing van device-cmyk(cc,mm,yy,kk/aa) maakt dat geen enkele browser dit ondersteunt. |
De functions rgb(), rgba(), hsl() en hsla() worden door alle grote browsers ondersteund.
Behalve de die hierboven genoemde manieren om kleuren te definiëren, is er in CSS nog een andere 'naam': transparent.
Hiermee maak je iets helemaal doorzichtig.
Dit is feitelijk hetzelfde als rgba(0,0,0,0) of hsla(0,0,0,0).
Om complete HTML-elementen, inclusief afbeeldingen, geheel of gedeeltelijk doorzichtig te maken, gebruik je de CSS-eigenschap
opacity.
