CSS | Kleuren

Nu we de basis van html en css onder de knie hebben, is het eindelijk tijd om de boel in te kleuren! Dankzij CSS heb je de keuze uit meer dan 16 miljoen kleuren, welke onder verschillende benamingen ingesteld kunnen worden:

• de Engelse naam van de kleur
• hex codes
• RGB

Kleurcodes in CSS

Iedere kleur op je beeldscherm is een mix van rood, groen en blauw. Dit zijn de drie basiskleuren waarmee alle anderen kleuren gecreëerd worden. Dit kun je op drie manieren instellen:

Color names

De meeste simpele variant is door de Engelse benaming van een kleur te gebruiken, zoals in de vorige post over CSS:

p {

  color: red;

}

De waarde red kun je vervangen door white, black, blue, fuchsia, pink, green, yellow, orange, gray, maroon, navy... moet ik nog even doorgaan? Een complete lijst van alle 147 kleuren vindt je hier.

Omdat deze benaming behoorlijk gelimiteerd is, wordt de voorkeur gegeven aan het gebruik van de andere twee mogelijkheden: hex codes en RGB.

Hex codes

Hex staat voor hexadecimal en is gebaseerd op 16 nummers: van 0 tot F.

De hex code begint altijd met een hash-tag (#), daarna volgen 6 of 3 cijfers. De 3-cijferige versie is een gecomprimeerde variant van de 6-cijferige versie, bijvoorbeeld #FF0000 wordt #F00, #00FF00 wordt #0F0 enzovoort.

Hoewel de 3-cijferige versie makkelijker te ontcijferen is, kun je met de 6-cijferige versie meer kanten op qua kleurkeuze.

RGB

Door middel van een RGB code geef je aan hoeveel Rood, Groen en Blauw er gemixt moet worden voor de uiteindelijke kleur. Dit geef je bijvoorbeeld als volgt aan:

rgb (100, 50, 80);

Foreground en background color

Bovenstaande methodes kun je gebruiken voor zowel de voorgrond (bijvoorbeeld de kleur van je tekst), maar ook voor de achtergrond (bijvoorbeeld de opvulling van een tabel).

CSS behandelt elk HTML element alsof het zich in een aparte box bevindt, afgesloten van de andere elementen op een webpagina. Door de kleur van de achtergrond in te stellen van een bepaald HTML element kleur je dus alleen de achtergrond van die bepaalde box.

Wanneer je geen achtergrond kleur instelt wordt de achtergrond standaard als transparant ingesteld. 

Om de kleur van de voorgrond in te stellen in CSS gebruik je de selector color, voor de achtergrond gebruik je background-color.