Kleur
We kunnen kleuren van de pagina makkelijk aanpassen met color voor de voorgrond (tekst) en background-color voor de achtergrond kleur.
Ook kunnen we de kleuren van randen (border-color e.d., met dezelfde codering aanpassen.
Kleurnotatie
We gebruiken op een scherm een driekleuren systeem met rood, groen en blauw. Dit zijn de primaire kleuren waaruit alle ander kleuren inclusief de grijs tinten gemaakt kunnen worden.
Per kleur gebruiken we 16 of 256 waarden.
Bij gebruik van 16 waarden per kleur kunnen we er dus 4096 verschillende kleuren maken, wat meestal voldoende zal zijn. Willen we meer kleuren dan moeten we 256 waarden per kleur gebruiken en kunnen we 16 777 216 verschillende kleuren maken.
Hexadecimaal
De kleurcode wordt genoteerd met #rgb of #rrggbb. Bij r loopt de waarde van 0 t/m f en bij rr loopt deze van 0 t/m ff. Dit zijn hexadecimale getallen.
De waarde #fc8 wordt voluit geschreven als #ffcc88.
Decimaal
We kunnen ook decimale waarden gebruiken, maar dan moeten we 256 waardes per kleur gebruiken (0 t/m 255). De notatie is rgb(r, b, g).
In plaats van waarde mag met ook percentages invullen, waarbij 100% overeenkomt met 255.
Browserveilige kleuren
Browser veilige kleuren stammen uit de tijd van de 8 bits videokaarten met hun 256 kleuren. Hierdoor kunnen we maar 6 bits per kleur gebruiken om een kleur te mengen wat ons in totaal 216 kleuren oplevert.
In de onderstaande tabel staan de waarden:
| Tint | Hexadecimaal | Decimaal | |
|---|---|---|---|
| 0% | 00 | 0 | 0 |
| 20% | 33 | 3 | 51 |
| 40% | 66 | 6 | 102 |
| 60% | 99 | 9 | 153 |
| 80% | cc | c | 204 |
| 100% | ff | f | 255 |
| R | G | B | |||||
|---|---|---|---|---|---|---|---|
| 0 | 3 | 6 | 9 | c | f | ||
| 0 | 0 | ||||||
| 0 | 3 | ||||||
| 0 | 6 | ||||||
| 0 | 9 | ||||||
| 0 | c | ||||||
| 0 | f | ||||||
| 3 | 0 | ||||||
| 3 | 3 | ||||||
| 3 | 6 | ||||||
| 3 | 9 | ||||||
| 3 | 3 | ||||||
| 3 | f | ||||||
| 6 | 0 | ||||||
| 6 | 3 | ||||||
| 6 | 6 | ||||||
| 6 | 9 | ||||||
| 6 | c | ||||||
| 6 | f | ||||||
| R | G | B | |||||
| 0 | 3 | 6 | 9 | c | f | ||
| 9 | 0 | ||||||
| 9 | 3 | ||||||
| 9 | 6 | ||||||
| 9 | 9 | ||||||
| 9 | c | ||||||
| 9 | f | ||||||
| c | 0 | ||||||
| c | 3 | ||||||
| c | 6 | ||||||
| c | 9 | ||||||
| c | c | ||||||
| c | f | ||||||
| f | 0 | ||||||
| f | 3 | ||||||
| f | 6 | ||||||
| f | 9 | ||||||
| f | c | ||||||
| f | f | ||||||
Grijstinten
Bij grijswaarden geldt dat r = g = b. We kunnen dus maximaal 256 grijswaarden maken. Als voorbeeld maken we een balk met 16 stappen.
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
De bovenstaande grijstrap dient zonder kleurzweem te worden weergegeven. Mocht er toch een kleurzweem te zien zijn dient u uw monitor eerst af te regelen.
| 0 | 3 | 6 | 9 | c | f |
|---|---|---|---|---|---|
Testbeeld
Klik met de rechtermuistoets op de afbeelding en klik op opslaan als... en u krijgt hem op 1980 × 1080 binnen.