Kleurtjes

Kleuren kun je op meerdere manieren aangeven in CSS.

  • Er zijn ingebouwde kleuren zoals red, green, blue en veel meer. Kijk voor meer kleurnamen hier: w3schools kleuren. Zoals je weet zijn er meer dan 16 miljoen verschillende kleuren mogelijk

    (RGB kleuren: 1 byte per subkleur en dus 24 bytes voor een pixel --> 2^24 mogelijke kleuren (meer dan 16 miljoen). Die kunnen natuurlijk niet allemaal een eigen naam hebben.

  • Je kunt gelukkig ook rechtstreeks de RGB waarde van een kleur opgeven. Dat kan op meerdere manieren:

    • rgb(0, 51, 153) --> getallen tussen 0 en 255 voor de 3 subkleuren

    • rgb(0%, 25%, 71%) --> percentages van 0 tot 100% voor de 3 subkleuren

    • #00AF32 of #A02 (dit is #AA0022) --> hexadecimale codes 00 t/m FF voor de 3 subkleuren.

Hieronder zie een een voorbeeld. De css-property "color" past de tekstkleur aan. De property "background-color"' past de achtergrondkleur aan:

body {
  color: darkblue;  /* color  verandert de tekstkleur*/
  background-color: lightgrey;
} 

p, h1, h2 { /* gebruik deze stijl voor p, h1 en h2 tegelijk*/
  color: rgb(0, 51, 153);
  background-color: #00FA32;
}

Refresher: RGB en hexadecimale getallen

RGB staat voor Red Green Blue, de 3 basiskleuren waarmee computers alle kleuren maken. Je geeft simpelweg aan hoeveel rood, groen en blauw je wilt mengen tot een kleur

Pixels in een computerscherm bestaan dan ook uit 3 lampjes van die 3 kleuren om zo ook daadwerkelijk de kleuren weer te geven.

Je hebt per subkleur 265 mogelijkheden, omdat de waarde in 8 bits wordt uitgedrukt (en 2^8 = 256). Deze tellen we vanaf 0, dus effectief zitten de waardes tussen 0 en 255. Die kun je in CSS rechtsteeks zo opgeven. Bijvoorbeeld:

rgb(0, 51, 200) Mix hier geen rood, een beetje groen en veel blauw.

Gebruikelijk is ook om het met hexadecimale getallen te doen (is korter). Daarbij gebruik je de waardes 00 t/m FF (FF is gelijk aan 255, reken maar na) voor elk van de RGB kleuren. Het voorbeeld van hierboven zou je in hexadecimale notatie zo schrijven:

#0033C8 (33 hexadecimaal is gelijk aan 51 decimaal en C8 hexadecimaal is gelijk aan 200 decimaal)

Kijk voor meer kleurcodes op:

PreviousOpdrachtNextAchtergrond

Last updated

Was this helpful?