H5 - Kleur gebruiken

Je ontwikkelt het kleurenpalet van dezelfde vier pagina’s en bewaart de kleuren in variabelen. De achtergrondafbeelding uit H2 krijgt cover; de inhoud blijft op leesbare vlakken staan. Geavanceerde kleurnotaties zijn herkenbaar als optionele proeven.

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: #17233b;
    --kleur-achtergrond: #e7eef6;
    --kleur-vlak: #ffffff;
    --kleur-accent: #2458d3;
    --kleur-accent-donker: #183b91;
    --kleur-rand: #d3ddec;
}

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

header, nav, main, aside, footer {
    background-color: var(--kleur-vlak);
}

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

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

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.

Je project heeft sinds H2 een achtergrondafbeelding in www/img. Omdat style.css naast de HTML-bestanden staat, is het pad vanuit de stylesheet img/achtergrond.webp. CSS-paden beginnen bij het CSS-bestand.

body {
    background-color: var(--kleur-achtergrond);
    background-image: url("img/achtergrond.webp");
    background-position: center;
    background-size: cover;
}

header, nav, main, aside, footer {
    background-color: var(--kleur-vlak);
}

• De fallback-kleur blijft zichtbaar als de afbeelding niet kan laden.
• Cover vult het achtergrondvlak; daarbij kan een deel van de afbeelding buiten beeld vallen.
• Center houdt het midden van de afbeelding in beeld. Kies een rustig beeld dat ook uitgesneden werkt.
• Dekkende inhoudsvlakken houden tekst leesbaar boven de afbeelding.
• Een achtergrond met background-attachment: fixed blijft staan tijdens scrollen. Dat is optioneel; onze eindsite heeft die instelling niet nodig.