02. kleur

Kleuren kunnen voor meerdere onderdelen van een HTML-document vastgelegd worden en er zijn verschillende manieren waarop deze kleuren benoemd kunnen worden. Ze kunnen gespecificeerd worden door hun kleurennaam, of HEX, RGB, RGBA, HSL of HSLA-waarden. Een waaier aan mogelijkheden dus.

notatie kleuren

kleurnaam

De meest eenvoudige manier om een kleur vast te leggen is door middel van een naam, wat makkelijker te onthouden is dan een combinatie van cijfers en/of letters. CSS ondersteunt 140 standaard kleuren op basis van de naam van de kleur zelf

/* kleurnaam */
h1 {
    color: yellow;}

HEX-code

Deze code begint met een # en telt 6-elementen, waarbij de intensiteit van rood, groen en blauw binnen een kleur geduid wordt. Hiervoor worden telkens een paar van twee karakters uit de range 0 t/m 9 en A t/m F gebruikt.

/* hex-code */
h2 {
    color: #ee3e80;}

RGB en RGBA-waarde

Om een RGB-kleur te definiëren wordt de waarde van elk van de basiskleuren rood, groen en blauw in een getal tussen 0 en 255 uitgedrukt.

/* rgb-waarde */
p {
    color: rgb(102,205,170);}

Bij een RGBA-waarde wordt er tevens rekening gehouden met de transparantie of opacity van een kleur. Aangezien de rgba-notatie geïntroduceerd werd binnen CSS3, wordt deze dus niet ondersteund door oudere browsers en zal enkel de kleur weergegeven worden.

/* rgba-waarde met een transparantie (opacity) van 50%, dus 0.5 */
p {
    color: rgba(102,205,170,0.5);} 

HSL & HSLA-waarde

CSS3 introduceert een nieuwe notatie om een kleur te benoemen met behulp van een tint, (hue) verzadiging (saturation) en lichtheid (lightness). hue: Tint is een graad op het kleurenwiel van 0 tot 360 graden. 0 is rood, 120 is groen en 240 is blauw. saturation: Verzadiging is een procentuele waarde, 0% betekent een grijstint en 100% is de volledige kleur. lightness: Lichtheid is ook een percentage, 0% is zwart, 50% is niet licht of donker, 100% is wit. alpha: Transparantie wordt uitgedrukt als een getal tussen 0 en 1,0. 0,5 staat bijvoorbeeld voor 50% transparantie en 0,75 staat voor 75% transparantie.

/* hsl-waarde */
body {

    background-color: #C8C8C8;

    background-color: hsl(0,0%,78%);}

    
/* hsla-waarde met een transparantie (opacity) van 15%, dus 0.15 */
p {

    background-color: #ffffff;

    background-color: hsla(0,100%,100%,0.15);}

CSS en kleur

body {

    background-color: silver;

    color: white;

    padding: 20px;

    font-family: Arial, Verdana, sans-serif;}

voorgrondkleur

De color eigenschap bepaalt de voorgrondkleur (de kleur van de tekst) van een element.

achtergrondkleur

De background-color eigenschap bepaalt de achtergrondkleur van een element.