Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers (zonder WordPress)

Kleuren met html-codes

Breng kleuren in je html-pagina's met kleurnamen, -codes of rgb-waarden.

Er zijn meerdere manieren om in html kleuren in je pagina’s te definiëren: met behulp van kleurnamen (bijvoorbeeld: red), met behulp van hexadecimale kleurcodes (de hexadecimale code voor rood is: #ff0000) of met behulp van rgb-waarden (de rgb-waarde voor rood is: rgb(255,0,0)). Even een uitleg:

  • Kleurnamen spreken voor zichzelf. Het zijn Engelstalige woorden die een kleur beschrijven, zoals: red.

  • Hexadecimale codes geven – op een schaal van 0 (geen kleur) tot 255 (volledige kleur) – aan welke hoeveelheden rood, groen en blauw er moeten worden weergegeven (elke kleur op je beeldscherm is te definiëren als een bepaalde combinatie van intensiteiten van rood, groen en blauw).

    Een heximale code bestaat uit drie sets van twee karakters. De waarde 00 betekent geen kleur, de waarde ff betekent volledige intensiteit in die kleur (255). Hexidecimale codes beginnen altijd met het karakter #. De waarde voor rood is: #ff0000.

  • Met rgb-waarden geef je zelf – op een schaal van 0 tot 255 – weer wat de kleurintensiteit van de kleuren rood, groen en blauw moet zijn, in deze vorm: rgb(255,0,0). Je kunt trouwens ook procenten gebruiken in plaats van getallen tussen de 0 en 255 – de code voor de kleur rood wordt dan: rgb(100%,0%,0%).

    Behalve rgb-waarden, bestaan er ook nog rgba-waarden. De a staat voor alpha en met deze vierde waarde kun je de mate van transparantie van een kleur aangeven. Deze alpha-waarde kan variëren van 0 tot 1, waarbij 0 volledig transparant is, en 1 helemaal niet transparant. Om even bij het voorbeeld te blijven: bij rgba(255,0,0,0.8) is de kleur rood iets lichter geworden omdat hij iets transparanter is gemaakt, en bij rgba(255,0,0,0.4) is deze kleur nóg wat lichter geworden, doordat hij nóg doorzichtiger is gemaakt.

Het voordeel van het gebruik van kleurnamen is dat je in de broncode van je pagina’s veel gemakkelijker ziet waar een bepaalde kleur is gebruikt. Het nadeel is natuurlijk dat je wat beperkter bent in je kleurkeuze: er zijn maar 141 kleurnamen, tegenover een vrijwel onbeperkt aantal codes waarmee je in html kleuren aan kunt geven.

Vroeger werd je nog aangeraden je te beperken tot de zogenaamde web safe colors – de beeldschermen waren nog niet van zo goede kwaliteit dat ze alle kleuren goed konden weergeven. Maar tegenwoordig zijn de beeldschermen zo goed dat je een bijna oneindig aantal kleuren in je html-pagina’s kunt laten weergeven.

Een overzicht van de html-kleurnamen vind je onderaan deze pagina; om de hexidecimale code voor een specifieke kleur te achterhalen kun je bijvoorbeeld gebruikmaken van deze tool voor html-kleuren.

Verlopende kleuren

Behalve effen kleuren, kun je ook verlopende kleuren definiëren in html en css. Bijna alle browsers kunnen deze code interpreteren, maar sommige hebben nog een extra regeltje nodig om dit goed te kunnen doen. De html-code die je voor verlopende kleuren nodig hebt, bestaat dus uit meerdere regels.

Hieronder zie je twee blokjes met verlopende kleuren – van rood naar indigo. (Zie je alleen twee effen blokjes, een rode en een indigo-kleurige, dan betekent dat dat de browser die je op dit moment gebruikt, nog niet overweg kan met deze code.)

Om deze blokjes te maken, heb ik de volgende code gebruikt:

background-color: red;
background-image: -webkit-linear-gradient(left, red, indigo);
background-image: linear-gradient(left, red, indigo);

background-color: indigo;
background-image: -webkit-linear-gradient(bottom, red, indigo);
background-image: linear-gradient(bottom, red, indigo);

Deze code voeg je (in je stylesheet) toe aan de opmaakkenmerken van het onderdeel dat een verlopende achtergrondkleur moet hebben (voor de achtergrond van het hele beeldscherm is dat bijvoorbeeld de body).

Overzicht van kleurnamen

Kleur Kleurnaam
black
darkslategray
dimgray
gray
darkgray
silver
lightgray
slategray
lightslategray
midnightblue
navy
darkblue
mediumblue
blue
royalblue
deepskyblue
dodgerblue
steelblue
indigo
darkslateblue
slateblue
mediumslateblue
cornflowerblue
darkmagenta
purple
blueviolet
darkviolet
darkorchid
mediumorchid
orchid
violet
fuchsia
magenta
deeppink
mediumvioletred
hotpink
teal
darkcyan
cadetblue
lightseagreen
mediumaquamarine
darkturquoise
aquamarine
mediumturquoise
turquoise
skyblue
lightskyblue
aqua
cyan
paleturquoise
lightsteelblue
powderblue
lightblue
darkgreen
green
forestgreen
seagreen
mediumseagreen
limegreen
lime
lawngreen
darkseagreen
lightgreen
palegreen
mediumspringgreen
springgreen
maroon
darkred
firebrick
brown
red
indianred
rosybrown
palevioletred
crimson
lightcoral
orangered
tomato
coral
saddlebrown
sienna
chocolate
peru
darkgoldenrod
darkorange
orange
goldenrod
gold
yellow
darkolivegreen
olivedrab
olive
yellowgreen
greenyellow
chartreuse
mediumpurple
darkkhaki
tan
thistle
gainsboro
plum
burlywood
lavender
darksalmon
salmon
lightsalmon
palegoldenrod
sandybrown
khaki
honeydew
azure
wheat
beige
whitesmoke
mintcream
ghostwhite
antiquewhite
linen
lightgoldenrodyellow
oldlace
lightpink
pink
peachpuff
navajowhite
moccasin
bisque
mistyrose
blanchedalmond
papayawhip
lavenderblush
seashell
aliceblue
lightcyan
cornsilk
lemonchiffon
floralwhite
snow
lightyellow
ivory
white