⏱️ Leestijd: ca. 5 min.

Kleurdefinities & achtergronden in CSS

Kleur is een van de krachtigste elementen binnen grafisch ontwerp. Kleuren roepen emotie op, trekken de aandacht van de bezoeker en bepalen de sfeer van een website. Als student Grafische Technieken weet je dat de juiste kleurkeuze het verschil maakt tussen een amateuristische en een professionele uitstraling.

In deze les leer je hoe je kleuren in CSS definieert op vier verschillende manieren (kleurnamen, Hex-codes, RGB en HSL) en hoe je met background-color en background-image de achtergrond van elementen stijlvol vormgeeft.

1. De Vier Kleurdefinities in CSS

In CSS kun je exact dezelfde kleur op meerdere manieren opschrijven. Elk kleurmodel heeft zijn eigen voor- en nadelen.

A. Kleurnamen (Keywords)

CSS kent 147 ingebouwde kleurnamen, zoals red, blue, coral, seagreen of hotpink. Daarnaast is er de speciale waarde transparent (volledig doorschijnend).

p {
    color: crimson;
}
Nadeel: Het aanbod van kleurnamen is beperkt. Je kunt hiermee niet de exacte merkkleur van een huisstijl instellen.

B. Hex-codes (Hexadecimaal)

Hex-codes zijn de meest gebruikte kleurnotatie in de grafische sector en webdesign. Een Hex-code begint altijd met een hekje (#) gevolgd door 6 tekens (combinaties van de cijfers 0–9 en de letters A–F).

De 6 tekens zijn opgebouwd uit drie paren voor Rood, Groen en Blauw (RRGGBB):

h1 {
    color: #2563eb; /* Hex-code voor helderblauw */
}
Tip: Is elk paar dubbel (zoals #FF0011)? Dan mag je dit verkorten tot 3 tekens: #F01.

C. RGB & RGBA (Rood, Groen, Blauw + Alfaniveau)

Het RGB-model gebruikt lichtmengeling. Je geeft per kleurkanaal (Rood, Groen, Blauw) een waarde op van 0 tot 255.

Met RGBA voeg je een vierde waarde toe: het Alpha-kanaal (transparantie). Deze waarde loopt van 0.0 (volledig onzichtbaar) tot 1.0 (volledig dekkend).

/* Standaard RGB */
.header-titel {
    color: rgb(37, 99, 235);
}

/* RGBA met 50% transparantie */
.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

D. HSL & HSLA (Hue, Saturation, Lightness)

Het HSL-model is voor grafische vormgevers vaak het meest intuïtieve model om mee te werken:

  1. Hue (Kleurtoon): De positie op de kleurencirkel in graden ($0^\circ$ tot $360^\circ$). $0^\circ$ = rood, $120^\circ$ = groen, $240^\circ$ = blauw.
  2. Saturation (Verzadiging): Hoe fel is de kleur? ($0\%$ = grijs, $100\%$ = volle kleur).
  3. Lightness (Lichtheid): Hoe helder is de kleur? ($0\%$ = zwart, $50\%$ = normale kleur, $100\%$ = wit).

Net als bij RGB kun je een Alpha-kanaal toevoegen voor transparantie (HSLA).

.card {
    /* Kleurtoon 217 (blauw), 91% verzadigd, 60% lichtheid */
    background-color: hsl(217, 91%, 60%);
}

2. Achtergrondkleuren instellen (background-color)

Om de achtergrond van een pagina of een specifiek element (zoals een knop, kaart of div) te kleuren, gebruik je de eigenschap background-color.

/* De volledige pagina krijgt een zachte, lichtgrijze achtergrond */
body {
    background-color: #f8fafc;
}

/* Een opvallende knop met een blauwe achtergrond */
.btn {
    background-color: #2563eb;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
}

3. Achtergrondafbeeldingen instellen (background-image)

Naast effen kleuren kun je ook een afbeelding of een kleurverloop (gradient) als achtergrond instellen met background-image.

A. Een afbeeldingsbestand als achtergrond

Met de functie url('pad/naar/foto.jpg') laad je een afbeelding in als achtergrond.

.hero-banner {
    background-image: url('images/header-bg.jpg');
    background-repeat: no-repeat;  /* Voorkomt dat de foto zich herhaalt */
    background-size: cover;        /* Vult het hele blok netjes op */
    background-position: center;   /* Centreert de foto */
    height: 400px;
}

B. Belangrijke sub-eigenschappen voor achtergronden:

C. Kleurverlopen (Gradients)

In plaats van een externe afbeelding kun je met CSS zelf vloeiende kleurovergangen genereren met linear-gradient() of radial-gradient().

/* Een verloop van donkerblauw naar paars onder een hoek van 135 graden */
.gradient-box {
    background-image: linear-gradient(135deg, #1e3a8a, #7c3aed);
    color: #ffffff;
    padding: 40px;
}

4. Keuzetabel Kleurmodellen

ModelVoorbeeldBeste toepassing
KleurnaamcrimsonSnelle tests en simpele voorbeelden.
Hex-code#2563ebStandaard voor vaste huisstijl- en merkkleuren.
RGB / RGBArgba(0, 0, 0, 0.5)Wanneer je transparantie (overlay/schaduw) nodig hebt.
HSL / HSLAhsl(217, 91%, 60%)Handig voor het maken van kleurenpaletten (tinten/schaduwen).

5. Compleet Praktijkvoorbeeld

Hier zie je hoe je verschillende achtergronden en kleurdefinities samen gebruikt in een HTML/CSS-opstelling:

<main>
    <!-- Kaart met Hex-kleur en transparante RGBA overlay -->
    <div class="card">
        <h2>Grafisch Ontwerp</h2>
        <p>Ontdek de kracht van typografie en kleur op het web.</p>
        <button class="btn-primary">Lees Meer</button>
    </div>
</main>

/* Algemene body achtergrond met HSL */
body {
    background-color: hsl(210, 20%, 98%);
    font-family: sans-serif;
}

/* Kaart met witte achtergrond en subtiele rand */
.card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
}

/* Knop met verloop achtergrond */
.btn-primary {
    background-image: linear-gradient(to right, #2563eb, #3b82f6);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

Samenvatting