H5 - Kleur gebruiken

Met CSS kun je tekst, achtergronden, links, randen en accenten een kleur geven. Kleur helpt om een pagina duidelijker te maken, maar kleur is ook snel te veel.

• color bepaalt de tekstkleur.
• background-color bepaalt de achtergrondkleur.
• border-color bepaalt de kleur van een rand.
• text-decoration-color kan de kleur van een onderstreping bepalen.

body {
    background-color: white;
    color: black;
}

a {
    color: blue;
}

section {
    background-color: lightyellow;
    border: 2px solid gold;
}

CSS kent meerdere manieren om kleuren te noteren. Ze doen uiteindelijk hetzelfde: ze beschrijven welke kleur de browser moet tonen.

• Kleurnaam: makkelijk leesbaar, maar beperkt.
• Hex-code: veel gebruikt in ontwerpen en websites.
• RGB: handig als je denkt in rood, groen en blauw.
• HSL: handig als je kleur wilt aanpassen met hue, saturation en lightness.
• OKLCH: moderne methode die beter aansluit op hoe mensen lichtheid en kleurverschil ervaren.

h1 {
    color: red;
}

p {
    color: #ff0000;
}

a {
    color: rgb(255 0 0);
}

em {
    color: hsl(0 100% 50%);
}

strong {
    color: oklch(63% 0.25 29);
}

Voor beginners zijn kleurnamen en hex-codes prima. Als je later kleuren bewuster wilt aanpassen, worden hsl() en oklch() interessanter.

Hex en RGB zijn allebei gebaseerd op rood, groen en blauw. Bij RGB kun je ook makkelijk een transparantie toevoegen met een slash.

article {
    background-color: #eeeeee;
    color: #222222;
}

mark {
    background-color: rgb(255 230 120);
    color: rgb(40 30 0);
}

body {
    background-color: rgb(0 0 0 / 50%);
}

• #eeeeee is een lichte grijstint.
• #222222 is bijna zwart.
• rgb(0 0 0 / 50%) is zwart met 50 procent transparantie.

HSL is vaak makkelijker te begrijpen dan RGB. Je kiest eerst de soort kleur en past daarna de verzadiging en lichtheid aan.

• h staat voor hue: de plek op de kleurencirkel.
• s staat voor saturation: hoe fel of grijs de kleur is.
• l staat voor lightness: hoe licht of donker de kleur is.

h1 {
    color: hsl(220 80% 50%);
}

section {
    background-color: hsl(220 80% 80%);
}

footer {
    background-color: hsl(220 80% 25%);
    color: white;
}

HSL is handig als je variaties wilt maken van dezelfde kleur.

oklch() is een moderne manier om kleur te schrijven. Deze methode werkt met waargenomen lichtheid. Dat betekent dat het vaak voorspelbaarder voelt als je een kleur lichter of donkerder maakt.

• L is lightness: de waargenomen lichtheid.
• C is chroma: hoeveel kleur erin zit.
• H is hue: de kleurhoek.

a {
    color: oklch(60% 0.18 250);
}

a:hover {
    color: oklch(52% 0.18 250);
}

Voor deze cursus hoef je oklch() nog niet uit je hoofd te kunnen gebruiken. Het is vooral goed om te weten dat moderne CSS meer kan dan alleen kleurnamen en hex-codes.

Met color-mix() kan CSS een nieuwe kleur maken door twee kleuren te mengen. Dit is handig voor hover-kleuren, lichte achtergronden of subtiele randen.

article {
    background-color: color-mix(in oklch, blue 10%, white);
    border: 2px solid color-mix(in oklch, blue 35%, white);
}

• in oklch vertelt in welke kleurruimte de browser moet mengen.
• blue 10% betekent dat er een klein beetje blauw wordt gebruikt.
• white vult de rest van de mix aan.

Voor eenvoudige websites kun je prima eerst vaste kleuren gebruiken. Later kun je met color-mix() kleuren slimmer afleiden van je hoofdkleur.

Als je dezelfde kleuren op meerdere plekken gebruikt, is het handig om ze bovenin je CSS-bestand op te slaan als variabelen. In CSS heten die custom properties.

:root {
    --kleur-tekst: #222222;
    --kleur-achtergrond: #ffffff;
    --kleur-accent: #2458d3;
    --kleur-accent-donker: #183b91;
}

body {
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
}

a {
    color: var(--kleur-accent);
}

p {
    color: var(--kleur-tekst);
}

a:hover {
    color: var(--kleur-accent-donker);
}

• Je hoeft een kleur maar op één plek aan te passen.
• Je CSS wordt overzichtelijker.
• Je voorkomt dat er overal net iets andere kleuren ontstaan.

Mooie kleuren zijn niet genoeg. Tekst moet goed leesbaar blijven. Contrast is het verschil tussen tekstkleur en achtergrondkleur.

• Zwarte tekst op wit heeft veel contrast.
• Lichtgrijze tekst op wit heeft weinig contrast.
• Rode tekst op een blauwe achtergrond is vaak onrustig en moeilijk leesbaar.
• Gebruik kleur niet als enige manier om informatie over te brengen.

/* Goed leesbaar */
body {
    background-color: white;
    color: black;
}

/* Vaak te weinig contrast */
p {
    background-color: white;
    color: lightgray;
}

Een veelgebruikte richtlijn is: normale tekst heeft minimaal een contrastverhouding van 4.5:1 nodig. Grote tekst heeft minimaal 3:1 nodig.

De achtergrond van een pagina zet je vaak op de body. Begin altijd met een gewone kleur. Die kleur is de fallback: de browser gebruikt die kleur als de afbeelding niet geladen kan worden.

body {
    background-color: #888888;
}

Je kunt daarna ook een afbeelding als achtergrond gebruiken. In CSS schrijf je een afbeelding met url().

body {
    background: #888888 url("achtergrond.jpg") center center fixed;
    background-size: cover;
}

• #888888 is de fallback-kleur.
• url("achtergrond.jpg") verwijst naar de afbeelding.
• De eerste center plaatst de afbeelding horizontaal in het midden.
• De tweede center plaatst de afbeelding verticaal in het midden.
• fixed zorgt ervoor dat de achtergrond blijft staan tijdens scrollen.
• background-size: cover laat de afbeelding het hele scherm vullen.

Let op: bij cover kan een deel van de afbeelding buiten beeld vallen. Dat is normaal. De browser vult het vlak volledig en snijdt de afbeelding waar nodig bij.