HTML kleurcodes

Wat zijn HTML kleuren?

Om kleuren in browsers (uniform) te kunnen weergeven werden HTML kleurcodes in het leven geroepen: dat kan de Engelse benaming zijn van het kleur, maar in de meeste gevallen wordt een kleur voorgesteld door een RGB-code.

Wat is een RGB-kleur?

Door het combineren van Rood, Groen en Blauw kunnen bijna alle kleuren voorgesteld worden. Een RGB kleurcode geeft voor zowel rood, groen als blauw aan welke intensiteit nodig is om de kleur samen te stellen. De intensiteit van de kleuren rood, groen en blauw worden bepaal door een getal tussen 0 (minste intensiteit) en 255 (meeste intensiteit).

Hoe wordt een HTML kleurcode samengesteld?

Een HTML kleurcode begint met een # gecombineerd met 6 letters of cijfers. De eerste twee symbolen representeren de intensiteit van de kleur rood. Het derde en vierde symbool representeren de intensiteit van groen en vijf en zes representeren de intensiteit van blauw. De intensiteit ligt tussen 0 en 255, maar wordt hexadecimaal weergegeven: dus de intensiteit ligt tussen 00 en FF. Bijvoorbeeld: #FF0000. Met deze HTML code kunnen browsers een kleur tonen met een maximum aan rood en geen groen en geen blauw.

HTML kleurencodes

In de tabellen hieronder hebben we de kleuren die bij elkaar horen gesorteerd. Je kan telkens de Engelse HTML-kleurennaam en de bijhorende RGB kleurencode (die weergegeven wordt met hexadecimale getallen) terugvinden.

Rode kleuren

HTML-naamRGB-codeHTML-naamRGB-code
indianred#CD5C5Cred#FF0000
lightcoral#F08080crimson#DC143C
salmon#FA8072firebrick#B22222
darksalmon#E9967Adarkred#8B0000
orangered#FF4500

Roze kleuren

HTML-naamRGB-codeHTML-naamRGB-code
pink#FFC0CBhotpink#FF69B4
lightpink#FFB6C1deeppink#FF1493
palevioletred#DB7093mediumvioletred#C71585

Gele kleuren

HTML-naamRGB-codeHTML-naamRGB-code
lightyellow#FFFFE0palegoldenrod#EEE8AA
lemonchiffon#FFFACDkhaki#F0E68C
lightgoldenrodyellow#FAFAD2yellow#FFFF00
papayawhip#FFEFD5gold#FFD700
moccasin#FFE4B5darkkhaki#BDB76B
peachpuff#FFDAB9

Blauwe kleuren

HTML-naamRGB-codeHTML-naamRGB-code
lightcyan#E0FFFFdeepskyblue#00BFFF
paleturquoise#AFEEEEcornflowerblue#6495ED
aqua#00FFFFsteelblue#4682B4
aquamarine#7FFFD4cadetblue#5F9EA0
turquoise#40E0D0mediumslateblue#7B68EE
mediumturquoise#48D1CCdodgerblue#1E90FF
darkturquoise#00CED1royalblue#4169E1
powderblue#B0E0E6blue#0000FF
lightsteelblue#B0C4DEmediumblue#0000CD
lightblue#ADD8E6darkblue#00008B
skyblue#87CEEBnavy#000080
lightskyblue#87CEFAmidnightblue#191970

Oranje kleuren

HTML-naamRGB-codeHTML-naamRGB-code
lightsalmon#FFA07Acoral#FF7F50
orange#FFA500tomato#FF6347
darkorange#FF8C00orangered#FF4500

Groene kleuren

HTML-naamRGB-codeHTML-naamRGB-code
greenyellow#ADFF2Fforestgreen#228B22
chartreuse#7FFF00green#008000
lawngreen#7CFC00olivedrab#6B8E23
lime#00FF00olive#808000
palegreen#98FB98darkolivegreen#556B2F
lightgreen#90EE90darkgreen#006400
mediumspringgreen#00FA9Aaquamarine#7FFFD4
springgreen#00FF7Fmediumaquamarine#66CDAA
yellowgreen#9ACD32darkseagreen#8FBC8F
limegreen#32CD32lightseagreen#20B2AA
mediumseagreen#3CB371darkcyan#008B8B
seagreen#2E8B57teal#008080

Paarse kleuren

HTML-naamRGB-codeHTML-naamRGB-code
lavender#E6E6FAblueviolet#8A2BE2
thistle#D8BFD8darkviolet#9400D3
plum#DDA0DDdarkorchid#9932CC
violet#EE82EErebeccapurple#663399
fuchsia#FF00FFdarkmagenta#8B008B
orchid#DA70D6purple#800080
mediumorchid#BA55D3darkslateblue#483D8B
mediumpurple#9370DBindigo#4B0082
slateblue#6A5ACD

Bruine kleuren

HTML-naamRGB-codeHTML-naamRGB-code
cornsilk#FFF8DCgoldenrod#DAA520
blanchedalmond#FFEBCDdarkgoldenrod#B8860B
bisque#FFE4C4peru#CD853F
navajowhite#FFDEADchocolate#D2691E
wheat#F5DEB3saddlebrown#8B4513
burlywood#DEB887sienna#A0522D
tan#D2B48Cbrown#A52A2A
rosybrown#BC8F8Fmaroon#800000
sandybrown#F4A460

Witte kleuren

HTML-naamRGB-codeHTML-naamRGB-code
white#FFFFFFbeige#F5F5DC
snow#FFFAFAoldlace#FDF5E6
honeydew#F0FFF0floralwhite#FFFAF0
mintcream#F5FFFAivory#FFFFF0
azure#F0FFFFantiquewhite#FAEBD7
aliceblue#F0F8FFlinen#FAF0E6
ghostwhite#F8F8FFlavenderblush#FFF0F5
whitesmoke#F5F5F5mistyrose#FFE4E1
seashell#FFF5EE

Grijze kleuren

HTML-naamRGB-codeHTML-naamRGB-code
gainsboro#DCDCDCdimgray#696969
lightgray#D3D3D3lightslategray#778899
silver#C0C0C0slategray#708090
darkgray#A9A9A9darkslategray#2F4F4F
gray#808080black#000000