Kleuren Tutorial
Kleuren worden weergegeven met een combinatie van ROOD, GROEN en BLAUW licht.
Kleurnamen
Met CSS kunnen kleuren worden ingesteld door kleurnamen te gebruiken:
Voorbeeld
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
CSS-kleurwaarden
Met CSS kunnen kleuren op verschillende manieren worden gespecificeerd:
- Op kleurnamen
- Als RGB-waarden
- Als hexadecimale waarden
- Als HSL-waarden (CSS3)
- Als HWB-waarden (CSS4)
- Met het
currentcolortrefwoord
RGB-kleuren
RGB-kleurwaarden worden in alle browsers ondersteund.
Een RGB-kleurwaarde wordt opgegeven met: rgb( ROOD , GROEN , BLAUW ).
Elke parameter definieert de intensiteit van de kleur als een geheel getal tussen 0 en 255.
Zo wordt rgb(0,0,255) weergegeven als blauw, omdat de parameter blauw is ingesteld op de hoogste waarde (255) en de andere op 0.
Voorbeeld
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Grijstinten worden vaak gedefinieerd met gelijke waarden voor alle 3 de lichtbronnen:
Voorbeeld
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Hexadecimale kleuren
Hexadecimale kleurwaarden worden ook in alle browsers ondersteund.
Een hexadecimale kleur wordt gespecificeerd met: # RR GG BB .
RR (rood), GG (groen) en BB (blauw) zijn hexadecimale gehele getallen tussen 00 en FF die de intensiteit van de kleur aangeven.
#0000FF wordt bijvoorbeeld weergegeven als blauw, omdat de blauwe component is ingesteld op de hoogste waarde (FF) en de andere zijn ingesteld op 00.
Voorbeeld
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Grijstinten worden vaak gedefinieerd met gelijke waarden voor alle 3 de lichtbronnen:
Voorbeeld
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Hoofdletters of kleine letters?
U kunt hoofdletters of kleine letters gebruiken om hexadecimale waarden op te geven.
Kleine letters zijn gemakkelijker te schrijven. Hoofdletters zijn gemakkelijker te lezen.
Kleurnamen
CSS ondersteunt 140 standaard kleurnamen.
In het volgende hoofdstuk vindt u een volledige alfabetische lijst van kleurnamen met hexadecimale waarden:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Het trefwoord van de huidige kleur
Het currentcolorsleutelwoord verwijst naar de waarde van de kleureigenschap van een element.
Voorbeeld
De randkleur van het volgende <div>-element is blauw, omdat de tekstkleur van het <div>-element blauw is:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}