Mijn-eigen-website.nl

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:

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. Niet alle browsers kunnen dit al, maar het worden er hoe langer hoe meer. Wel hebben ze vaak nog verschillende codes nodig om dit te doen. De html-code die je voor verlopende kleuren nodig hebt, wordt dus wel een beetje lang.

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: -moz-linear-gradient(left, red, indigo);
background-image: -ms-linear-gradient(left, red, indigo);
background-image: -o-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: -moz-linear-gradient(bottom, red, indigo);
background-image: -ms-linear-gradient(bottom, red, indigo);
background-image: -o-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

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid