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: rgb(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: hsl(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. Kleuren worden aangegeven met de function: device-cmyk(cc,mm,yy,kk). De bijdragen van de componenten cyaan, magenta, geel en zwart stel je in met de parameters cc, mm, yy en kk. Dit zijn getallen tussen 0.0 en 1.0. |
|
De function rgb() wordt door alle grote browsers ondersteund.
De functions rgba(), hsl() en hsla() worden ondersteund door Internet Explorer (vanaf versie 9), FireFox,
Chrome, Safari en Opera (vanaf versie 10).
De ondersteuning voor device-cmyk is (nog heel) beperkt, omdat het CMYK-kleurenmodel gericht is op de drukkerijwereld,
en niet op gebruik op een beeldscherm.
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).
