Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Kleuren converteren:

Naam, Hex, RGB of HSL:
 
   
   
   
   
 

Installeer deze ColorConverter als plugin in je browser:
 

Er zijn vele manieren om op een HTML-pagina met behulp van CSS kleuren te definiëren. Deze kleuren zijn op diverse manieren toepasbaar, zoals bijv. de tekstkleur (color), de achtergrondkleur (background-color) en de kaderkleur (border-color)

Kleurnamen

Allereerst kan dat met behulp van engelstalige namen:

color: white;

Er is een lijst van 140 kleurnamen, die in alle browsers gebruikt kunnen worden (zie onder aan deze pagina).

Het nadeel is, dat het 'slechts' 140 kleuren zijn, die ook nog eens foutgevoelig zijn, vanwege de exacte spelling ervan, hoewel ze niet hoofdlettergevoelig zijn.

Hexadecimale codes

Ten tweede kan gebruik worden gemaakt van hexadecimale codes. Voor een beginnend gebruiker ziet dat er vaak wat dreigender uit, maar als je het systeem begrijpt, dan kun je daar zelf behoorlijk wat mee bereiken.

color: #01940E;

De uitleg hierbij is, dat het gaat om 3 blokjes van 2 cijfers, die net als bij het hieronder genoemde RGB-systeem voor de kleuren Rood, Groen en Blauw staan. In bovenstaand voorbeeld staat dus eigenlijk een kleur 01 94 0E. Dat hierbij een letter staat vermeld, komt omdat het geen decimale getallen zijn die we hier gebruiken, maar hexadecimale getallen. We nummeren daarbij niet van 0 t/m 9, maar gaan na de 9 nog door: 0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f. In onze decimale telling staat F dan voor 15. Net als in de decimale nummering gaan we daarna verder met 10 (=16) t/m 1F (=31), 20 (=32) t/m 2F (=47), 30 (=48) t/m 3F (63), enz.

Het hoogste getal, dat je met een hexadecimale waarde van 2 posities kunt bereiken is dan FF, oftewel: 255.

In onze hexadecimale kleurcode #01940E staat dus eigenlijk: Rood(01), Groen(94), Blauw(0E) of in decimalen: Rood(01), Groen(148), Groen(14).

Letters staan in hexadecimale codes voor de leesbaarheid vaak in hoofdletters vermeld, maar dat is niet verplicht. #F9A3EA betekent precies het zelfde als #f9a3ea.

Wanneer alledrie de blokjes exact dezelfde waarden weergeven, dan kunnen we daaraan eenvoudig zien, dat het een grijstint is. Dat loopt van geheel zwart (#000000) tot geheel wit (#FFFFFF) via alle tussenliggende waarden, zoals bijv. #252525, #4F4F4F, #C7C7C7. Hoe hoger het hexadecimale getal, des te lichter wordt de grijstint. Zo blijken er dus geen 50, maar zelfs 256 tinten grijs te bestaan, waarvan hieronder een kwart te zien is (dus in stappen van 4).

Je browser ondersteunt geen html5 canvas

Opvallend is daarbij, dat de kleur met de naam DarkGray (#A9A9A9) lichter is dan Gray (#808080) en dat LightSlateGray (#778899), anders dan de naam doet vermoeden, geen echte grijstint is.

Een andere bijzonderheid, is dat wanneer alledrie de blokjes per blokje bestaan uit twee gelijke waarden (bijv. #2244AA), dan kan dat verkort worden genoteerd als #24A. Andersom geredeneerd: Wanneer je zo'n code tegenkomt, verdubbel dan alledrie de waarden (2 wordt 22, 4 wordt 44 en A wordt AA). #24A is dus het zelfde als #2244AA.

RGB / RGBA

rgbAls derde noemen we hier RGB en RGBA. Met RGB geef je drie decimale getallen op om je kleur te mengen: Rood, Groen en Blauw.

color: rgb(1, 148, 14);

Eigenlijk is dit systeem dus hetzelfde als het zojuist genoemde hexadecimale systeem, met dat verschil, dat het voor ons mensen iets beter leesbaar is.

Per kleur kunnen hier waarden ingevuld worden van 0 t/m 255. Overigens is het ook toegestaan om 3 percentages op te geven (van 0% tot en met 100%).

Met RGBA geef je nog een vierde waarde mee, een decimaal getal tussen 0 en 1, waarmee wordt aangegeven hoe groot de doorzichtigheid van de kleur is (0=transparant, 1=niet transparant).

color: rgba(120, 44, 68, 0.45);

In de afbeelding is het RGB-kleurenwiel te zien met daarin de primaire kleuren (rood op 0°, groen op 120°, blauw op 240°) en daar tussenin de secundaire kleuren (geel op 60°, cyan op 180°, magenta op 300°). In onderstaand voorbeeld zien we hoe de primaire en secundaire kleuren opgebouwd worden met deze drie kleuren licht.

Rood
#FF0000
rgb(255,0,0)
 
#FF8000
rgb(255,128,0)
Geel
#FFFF00
rgb(255,255,0)
 
#80FF00
rgb(128,255,0)
Groen
#00FF00
rgb(0,255,0)
 
#00FF80
rgb(0,255,128)
 
#FF0080
rgb(255,0,128)
Magenta
#FF00FF
rgb(255,0,255)
 
#8000FF
rgb(128,0,255)
Blauw
#0000FF
rgb(0,0,255)
 
#0080FF
rgb(0,128,255)
Cyaan
#00FFFF
rgb(0,255,255)

De primaire kleuren zijn hierbij rood, groen en blauw. De secundaire kleuren krijg je door het licht van deze kleuren te mengen: rood + groen = geel, groen + blauw = cyaan en blauw + rood = magenta. En dat is een hele mooie brug naar CMY(K) wat verderop besproken wordt.

HSL / HSLA

HSL staat voor Hue, Saturation, Lightness en is net als RGB een kleurcodering met behulp van 3 getallen. Het eerste getal staat voor de kleur (Hue) en kan een getal zijn vanaf 0 t/m 360. Deze getallen hebben betrekking op de 'graden' van het HSL-kleurenwiel. 0° is daarbij rood, 120° is groen en 240° is blauw. De getallen worden genoteerd zonder het gradenteken.

Het tweede en derde getal zijn allebei percentages. Het tweede getal staat daarbij voor de saturatie, ofwel de verzadiging van de kleur. Bij 100% wordt de 'volledige' kleur getoond. Hoe lager dit getal wordt, des te grijzer wordt de kleur, totdat je helemaal bij 0% bent uitgekomen.

Het derde getal (lightness) geeft de helderheid van de kleur aan. Hier is 50% de neutrale waarde. Hoe hoger dit percentage, des te lichter wordt de kleur (100% = wit). Hoe lager dit getal, des te donkerder wordt de kleur (0% = zwart).

Voorbeeld: hsl(138, 80%, 35%).

Wanneer het tweede getal (saturatie) 0% is, dan maakt het niet uit wat het eerste getal is. Dat zal altijd de zelfde grijstint opleveren. De grijstint kan eventueel lichter of donkerder gemaakt worden met het derde getal (lightness). Wanneer die waarde 0% is, dan is het resultaat altijd zwart. Is die waarde 100%, dan is het resultaat altijd wit.

Net als bij RGB / RGBA kan ook hier een vierde waarde worden toegevoegd om de doorzichtigheid van de kleur op te geven (zie hierboven).

HWB

HWB staat voor Hue, Whiteness, Blackness. Deze kleurcodering wordt in browsers nog niet ondersteund, maar er loopt een voorstel om dit in CSS4 tot een nieuwe standaard te maken.

In deze kleurcodering is Hue net als bij HSL de kleur volgens het HWB-kleurenwiel.

Whiteness en blackness zijn allebei percentages. Wanneer ze allebei 0% zijn, dan zien we de gewone heldere kleur. Door het percentage bij whiteness te verhogen wordt de kleur steeds lichter (100% = wit). Blackness werkt net andersom: Als we dit percentage verhogen, dan wordt de kleur steeds donkerder (100% = zwart).

De som van deze beide percentages kan niet hoger zijn dan 100%. Wanneer bijv. whiteness 78% is, dan kan blackness niet hoger zijn dan 22%.

Voorbeeld: hwb(138, 65%, 22%).

CMY(K)

CMYK staat voor Cyan, Magenta, Yellow en blacK. Deze kleurcodering wordt in browsers nog niet ondersteund, maar er loopt een voorstel om dit in CSS4 tot een nieuwe standaard te maken. CMYK is vooral bekend van de druk- en printwereld (denk bijv. ook aan de cartridges in je printer).

Dit kleursysteem maakt gebruik van hetzelfde kleurenwiel als RGB, alleen is het wiel daarbij 180° gedraaid.

De kleurcodering bestaat hier uit vier getallen, alle vier percentages. Hoe hoger de getallen, des te meer van die kleur wordt toegevoegd.

Voorbeeld: cmyk(80%, 0%, 96%, 45%).

Kleurnamen

* Kleurnamen met 'Gray' mogen ook worden gespeld als 'Grey'.

KleurnaamHexRGBHSLKleur
AliceBlue #F0F8FF RGB(240,248,255) HSL(208,100%,97%)  
AntiqueWhite #FAEBD7 RGB(250,235,215) HSL(34,78%,91%)  
Aqua #00FFFF RGB(0,255,255) HSL(180,100%,50%)  
Aquamarine #7FFFD4 RGB(127,255,212) HSL(160, 100%, 75%)  
Azure #F0FFFF RGB(240,255,255) HSL(180, 100%, 97%)  
Beige #F5F5DC RGB(245, 245, 220) HSL(60, 56%, 91%)  
Bisque #FFE4C4 RGB(255,225,196) HSL(33, 100%, 88%)  
Black #000000 RGB(0,0,0) HSL(0, 0%, 0%)  
BlanchedAlmond #FFEBCD RGB(255,235,205) HSL(36, 100%, 90%)  
Blue #0000FF RGB(0,0,255) HSL(240, 100%, 50%)  
BlueViolet #8A2BE2 RGB(138,43,226) HSL(271, 76%, 53%)  
Brown #A52A2A RGB(165,42,42) HSL(0, 59%, 41%)  
BurlyWood #DEB887 RGB(222,184,135) HSL(34, 57%, 70%)  
CadetBlue #5F9EA0 RGB(95,158,160) HSL(182, 25%, 50%)  
Chartreuse #7FFF00 RGB(127,255,0) HSL(90, 100%, 50%)  
Chocolate #D2691E RGB(210,105,30) HSL(25, 75%, 47%)  
Coral #FF7F50 RGB(255,127,80) HSL(16, 100%, 66%)  
CornflowerBlue #6495ED RGB(100,149,237) HSL(219, 79%, 66%)  
Cornsilk #FFF8DC RGB(255,248,220) HSL(48, 100%, 93%)  
Crimson #DC143C RGB(220,20,60) HSL(348, 83%, 47%)  
Cyan #00FFFF RGB(0,255,255) HSL(180, 100%, 50%)  
DarkBlue #00008B RGB(0,0,139) HSL(240, 100%, 27%)  
DarkCyan #008B8B RGB(0,139,139) HSL(180, 100%, 27%)  
DarkGoldenRod #B8860B RGB(184,134,11) HSL(43, 89%, 38%)  
DarkGray * #A9A9A9 RGB(169,169,169) HSL(0, 0%, 66%)  
DarkGreen #006400 RGB(0,100,0) HSL(120, 100%, 20%)  
DarkKhaki #BDB76B RGB(189,183,107) HSL(56, 38%, 58%)  
DarkMagenta #8B008B RGB(139,0,139) HSL(300, 100%, 27%)  
DarkOliveGreen #556B2F RGB(85,107,47) HSL(82, 39%, 30%)  
DarkOrange #FF8C00 RGB(255,140,0) HSL(33,100%,50%)  
DarkOrchid #9932CC RGB(153,50,204) HSL(280,61%,50%)  
DarkRed #8B0000 RGB(139,0,0) HSL(0,100%,45%)  
DarkSalmon #E9967A RGB(233,150,122) HSL(15,72%,70%)  
DarkSeaGreen #8FBC8F RGB(143,188,143) HSL(120,25%,65%)  
DarkSlateBlue #483D8B RGB(72,61,139) HSL(248,39%,39%)  
DarkSlateGray * #2F4F4F RGB(47,79,79) HSL(180,25%,25%)  
DarkTurquoise #00CED1 RGB(0,206,209) HSL(181,100%,41%)  
DarkViolet #9400D3 RGB(148,0,211) HSL(282,100%,41%)  
DeepPink #FF1493 RGB(255,20,147) HSL(328,100%,54%)  
DeepSkyBlue #00BFFF RGB(0,191,255) HSL(195,100%,50%)  
DimGray * #696969 RGB(105, 105, 105) HSL(0, 0%, 41%)  
DodgerBlue #1E90FF RGB(30, 144, 255) HSL(210, 100%, 56%)  
FireBrick #B22222 RGB(178, 34, 34) HSL(0, 68%, 42%)  
FloralWhite #FFFAF0 RGB(255, 250, 240) HSL(40, 100%, 97%)  
ForestGreen #228B22 RGB(34, 139, 34) HSL(120, 61%, 34%)  
Fuchsia #FF00FF RGB(255, 0, 255) HSL(300, 100%, 50%)  
Gainsboro #DCDCDC RGB(220, 220, 220) HSL(0, 0%, 86%)  
GhostWhite #F8F8FF RGB(248, 248, 255) HSL(240, 100%, 99%)  
Gold #FFD700 RGB(255, 215, 0) HSL(51, 100%, 50%)  
GoldenRod #DAA520 RGB(218, 165, 32) HSL(43, 74%, 49%)  
Gray * #808080 RGB(128, 128, 128) HSL(0, 0%, 50%)  
Green #008000 RGB(0, 128, 0) HSL(120, 100%, 25%)  
GreenYellow #ADFF2F RGB(173, 255, 47) HSL(84, 100%, 59%)  
HoneyDew #F0FFF0 RGB(240, 255, 240) HSL(120, 100%, 97%)  
HotPink #FF69B4 RGB(255, 105, 180) HSL(330, 100%, 71%)  
IndianRed #CD5C5C RGB(205, 92, 92) HSL(0, 53%, 58%)  
Indigo #4B0082 RGB(75, 0, 130) HSL(275, 100%, 25%)  
Ivory #FFFFF0 RGB(255, 255, 240) HSL(60, 100%, 97%)  
Khaki #F0E68C RGB(240, 230, 140) HSL(54, 77%, 75%)  
Lavender #E6E6FA RGB(230, 230, 250) HSL(240, 67%, 94%)  
LavenderBlush #FFF0F5 RGB(255, 240, 245) HSL(340, 100%, 97%)  
LawnGreen #7CFC00 RGB(124, 252, 0) HSL(90, 100%, 49%)  
LemonChiffon #FFFACD RGB(255, 250, 205) HSL(54, 100%, 90%)  
LightBlue #ADD8E6 RGB(173, 216, 230) HSL(195, 53%, 79%)  
LightCoral #F08080 RGB(240, 128, 128) HSL(0, 79%, 72%)  
LightCyan #E0FFFF RGB(224, 255, 255) HSL(180, 100%, 94%)  
LightGoldenRodYellow #FAFAD2 RGB(250, 250, 210) HSL(60, 80%, 90%)  
LightGray * #D3D3D3 RGB(211, 211, 211) HSL(0, 0%, 83%)  
LightGreen #90EE90 RGB(144, 238, 144) HSL(120, 73%, 75%)  
LightPink #FFB6C1 RGB(255, 182, 193) HSL(351, 100%, 86%)  
LightSalmon #FFA07A RGB(255, 160, 122) HSL(17, 100%, 74%)  
LightSeaGreen #20B2AA RGB(32, 178, 170) HSL(177, 70%, 41%)  
LightSkyBlue #87CEFA RGB(135, 206, 250) HSL(203, 92%, 75%)  
LightSlateGray * #778899 RGB(119, 136, 153) HSL(210, 14%, 53%)  
LightSteelBlue #B0C4DE RGB(176, 196, 222) HSL(214, 41%, 78%)  
LightYellow #FFFFE0 RGB(255, 255, 224) HSL(60, 100%, 94%)  
Lime #00FF00 RGB(0, 255, 0) HSL(120, 100%, 50%)  
LimeGreen #32CD32 RGB(50, 205, 50) HSL(120, 61%, 50%)  
Linen #FAF0E6 RGB(250, 240, 230) HSL(30, 67%, 94%)  
Magenta #FF00FF RGB(255, 0, 255) HSL(300, 100%, 50%)  
Maroon #800000 RGB(128, 0, 0) HSL(0, 100%, 25%)  
MediumAquaMarine #66CDAA RGB(102, 205, 170) HSL(160, 51%, 60%)  
MediumBlue #0000CD RGB(0, 0, 205) HSL(240, 100%, 40%)  
MediumOrchid #BA55D3 RGB(186, 85, 211) HSL(288, 59%, 58%)  
MediumPurple #9370DB RGB(147, 112, 219) HSL(260, 60%, 65%)  
MediumSeaGreen #3CB371 RGB(60, 179, 113) HSL(147, 50%, 47%)  
MediumSlateBlue #7B68EE RGB(123, 104, 238) HSL(249, 80%, 67%)  
MediumSpringGreen #00FA9A RGB(0, 250, 154) HSL(157, 100%, 49%)  
MediumTurquoise #48D1CC RGB(72, 209, 204) HSL(178, 60%, 55%)  
MediumVioletRed #C71585 RGB(199, 21, 133) HSL(322, 81%, 43%)  
MidnightBlue #191970 RGB(25, 25, 112) HSL(240, 64%, 27%)  
MintCream #F5FFFA RGB(245, 255, 250) HSL(150, 100%, 98%)  
MistyRose #FFE4E1 RGB(255, 228, 225) HSL(6, 100%, 94%)  
Moccasin #FFE4B5 RGB(255, 228, 181) HSL(38, 100%, 85%)  
NavajoWhite #FFDEAD RGB(255, 222, 173) HSL(36, 100%, 84%)  
Navy #000080 RGB(0, 0, 128) HSL(240, 100%, 25%)  
OldLace #FDF5E6 RGB(253, 245, 230) HSL(39, 85%, 95%)  
Olive #808000 RGB(128, 128, 0) HSL(60, 100%, 25%)  
OliveDrab #6B8E23 RGB(107, 142, 35) HSL(80, 60%, 35%)  
Orange #FFA500 RGB(255, 165, 0) HSL(39, 100%, 50%)  
OrangeRed #FF4500 RGB(255, 69, 0) HSL(16, 100%, 50%)  
PaleGoldenRod #EEE8AA RGB(238, 232, 170) HSL(55, 67%, 80%)  
PaleGreen #98FB98 RGB(152, 251, 152) HSL(120, 93%, 79%)  
PaleTurquoise #AFEEEE RGB(175, 238, 238) HSL(180, 65%, 81%)  
PaleVioletRed #DB7093 RGB(219, 112, 147) HSL(340, 60%, 65%)  
PapayaWhip #FFEFD5 RGB(255, 239, 213) HSL(37, 100%, 92%)  
PeachPuff #FFDAB9 RGB(255, 218, 185) HSL(28, 100%, 86%)  
Peru #CD853F RGB(205, 133, 63) HSL(30, 59%, 53%)  
Pink #FFC0CB RGB(255, 192, 203) HSL(350, 100%, 88%)  
Plum #DDA0DD RGB(221, 160, 221) HSL(300, 47%, 75%)  
PowderBlue #B0E0E6 RGB(176, 224, 230) HSL(187, 52%, 80%)  
Purple #800080 RGB(128, 0, 128) HSL(300, 100%, 25%)  
RebeccaPurple #663399 RGB(102, 51, 153) HSL(270, 50%, 40%)  
Red #FF0000 RGB(255, 0, 0) HSL(0, 100%, 50%)  
RosyBrown #BC8F8F RGB(188, 143, 143) HSL(0, 25%, 65%)  
RoyalBlue #4169E1 RGB(65, 105, 225) HSL(225, 73%, 57%)  
SaddleBrown #8B4513 RGB(139, 69, 19) HSL(25, 76%, 31%)  
Salmon #FA8072 RGB(250, 128, 114) HSL(6, 93%, 71%)  
SandyBrown #F4A460 RGB(244, 164, 96) HSL(28, 87%, 67%)  
SeaGreen #2E8B57 RGB(46, 139, 87) HSL(146, 50%, 36%)  
SeaShell #FFF5EE RGB(255, 245, 238) HSL(25, 100%, 97%)  
Sienna #A0522D RGB(160, 82, 45) HSL(19, 56%, 40%)  
Silver #C0C0C0 RGB(192, 192, 192) HSL(0, 0%, 75%)  
SkyBlue #87CEEB RGB(135, 206, 235) HSL(197, 71%, 73%)  
SlateBlue #6A5ACD RGB(106, 90, 205) HSL(248, 53%, 58%)  
SlateGray * #708090 RGB(112, 128, 144) HSL(210, 13%, 50%)  
Snow #FFFAFA RGB(255, 250, 250) HSL(0, 100%, 99%)  
SpringGreen #00FF7F RGB(0, 255, 127) HSL(150, 100%, 50%)  
SteelBlue #4682B4 RGB(70, 130, 180) HSL(207, 44%, 49%)  
Tan #D2B48C RGB(210, 180, 140) HSL(34, 44%, 69%)  
Teal #008080 RGB(0, 128, 128) HSL(180, 100%, 25%)  
Thistle #DFB8DF RGB(216, 191, 216) HSL(300, 24%, 80%)  
Tomato #FF6347 RGB(255, 99, 71) HSL(9, 100%, 64%)  
Turquoise #40E0D0 RGB(64, 224, 208) HSL(174, 72%, 56%)  
Violet #EE82EE RGB(238, 130, 238) HSL(300, 76%, 72%)  
Wheat #F5DEB3 RGB(245, 222, 179) HSL(39, 77%, 83%)  
White #FFFFFF RGB(255,255,255) HSL(0, 0%, 100%)  
WhiteSmoke #F5F5F5 RGB(245, 245, 245) HSL(0, 0%, 96%)  
Yellow #FFFF00 RGB(255, 255, 0) HSL(60, 100%, 50%)  
YellowGreen #9ACD32 RGB(154, 205, 50) HSL(80, 61%, 50%)