CSS, HTML und Javascript mit {stil}

Farbnamen, Farbcodes und numerische Farbwerte

HTML Farbnamen und Farbcodes: RGB, HEX, HSL

Die Tabelle der Farbnamen mit den Farbcodes in Hex- und RGB-Werten zeigen zusätzlich die HSL-Werte der Farben. Der HSL-Farbraum ordnet Farben nach Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) und kommt unserem Farbempfinden besser entgegen als Hex oder RGB-Farbwerte.

Diese Farbnamen werden in vielen Anwendungen angeboten und sind eine praktische Hilfestellung beim Layout, Design und Testen von Webseiten.

Ab CSS3 gehören die Farbnamen zum CSS-Standard (siehe CSS Color Module Level 3). Die komplette Liste der Farbnamen wird allen Browsern zuverlässig umgesetzt.

Nicht zuverlässig ist allerdings die Angabe von Farben als HSL-Werte – sie werden von den älteren Versionen von Internet Explorer nicht interpretiert. Erst IE9 zeigt Farben in HSL-Notation an.

Und es heißt aufpassen: CSS benutzt HSL, Photoshop und andere Anwendungen geben Farben im HSV-Farbraum an!

Tabelle Farbnamen und Farbcodes

Die Tabelle ist nach Farben geordnet: wie auf dem Farbkreis von Rot über Orange nach Gelb, Grün, Blau, Violett. Wenn uns die Reihenfolge willkürlich erscheint, dann liegt es daran, dass neben dem Farbton auch Helligkeit und Sättigung über die Darstellung der Farbe entscheiden.

red
rgb(255,0,0) #FF0000 hsl(0,100%,50%)
darkred
rgb(139,0,0) #8B0000 hsl(0,100%,27%)
lightcoral
rgb(240,128,128) #F08080 hsl(0,79%,72%)
firebrick
rgb(178,34,34) #B22222 hsl(0,68%,42%)
brown
rgb(165,42,42) #A52A2A hsl(0,59%,41%)
indianred
rgb(205,92,92) #CD5C5C hsl(0,53%,58%)
rosybrown
rgb(188,143,143) #BC8F8F hsl(0,25%,65%)
maroon
rgb(128,0,0) #800000 hsl(0,100%,25%)
mistyrose
rgb(255,228,225) #FFE4e1 hsl(6,100%,94%)
salmon
rgb(250,128,114) #FA8072 hsl(6,93%,71%)
tomato
rgb(255,99,71) #FF6347 hsl(9,100%,64%)
darksalmon
rgb(233,150,122) #E9967A hsl(15,72%,70%)
coral
rgb(255,127,80) #FF7F50 hsl(16,100%,66%)
orangered
rgb(255,69,0) #FF4500 hsl(16,100%,50%)
lightsalmon
rgb(255,160,122) #FFA07A hsl(17,100%,74%)
sienna
rgb(160,82,45) #A0522D hsl(19,56%,40%)
chocolate
rgb(210,105,30) #D2691E hsl(25,75%,47%)
saddlebrown
rgb(139,69,19) #8B4513 hsl(25,76%,31%)
seashell
rgb(255,245,238) #FFF5EE hsl(25,100%,97%)
peachpuff
rgb(255,218,185) #FFDAB9 hsl(28,100%,86%)
sandybrown
rgb(244,164,96) #F4A460 hsl(28,87%,67%)
linen
rgb(250,240,230) #FAF0E6 hsl(30,67%,94%)
peru
rgb(205,133,63) #CD853F hsl(30,59%,53%)
bisque
rgb(255,228,196) #FFE4C4 hsl(33,100%,88%)
darkorange
rgb(255,140,0) #FF8C00 hsl(33,100%,50%)
antiquewhite
rgb(250,235,215) #FAEBd7 hsl(34,78%,91%)
tan
rgb(210,180,140) #D2B48C hsl(34,44%,69%)
burlywood
rgb(222,184,135) #DEB887 hsl(34,57%,70%)
blanchedalmond
rgb(255,235,205) #FFEBCD hsl(36,100%,90%)
navajowhite
rgb(255,222,173) #FFdEAD hsl(36,100%,84%)
papayawhip
rgb(255,239,213) #FFEFd5 hsl(37,100%,92%)
moccasin
rgb(255,228,181) #FFE4B5 hsl(38,100%,85%)
oldlace
rgb(253,245,230) #FdF5E6 hsl(39,85%,95%)
wheat
rgb(245,222,179) #F5DEB3 hsl(39,97%,83%)
orange
rgb(255,165,0) #FFA500 hsl(39,100%,50%)
floralwhite
rgb(255,250,240) #FFFAF0 hsl(40,100%,97%)
goldenrod
rgb(218,165,32) #DAA520 hsl(43,74%,49%)
darkgoldenrod
rgb(184,134,11) #B8860B hsl(43,89%,38%)
cornsilk
rgb(255,248,220) #FFF8DC hsl(48,100%,93%)
gold
rgb(255,215,0) #FFD700 hsl(51,100%,50%)
khaki
rgb(240,230,140) #F0E68C hsl(54,77%,75%)
lemonchiffon
rgb(255,250,205) #FFFACD hsl(54,100%,90%)
palegoldenrod
rgb(238,232,170) #EEE8AA hsl(55,67%,80%)
darkkhaki
rgb(189,183,107) #BDB76B hsl(56,38%,58%)
beige
rgb(245,245,220) #F5F5DC hsl(60,56%,91%)
lightgoldenrodyellow
rgb(250,250,210) #FAFAD2 hsl(60,80%,90%)
ivory
rgb(255,255,240) #FFFFF0 hsl(60,100%,97%)
lightyellow
rgb(255,255,224) #FFFFe0 hsl(60,100%,94%)
yellow
rgb(255,255,0) #FFFF00 hsl(60,100%,50%)
olive
rgb(128,128,0) #808000 hsl(60,100%,25%)
yellowgreen
rgb(154,205,50) #9aCd32 hsl(80,61%,50%)
olivedrab
rgb(107,142,35) #6B8e23 hsl(80,60%,35%)
darkolivegreen
rgb(85,107,47) #556B2F hsl(82,39%,30%)
greenyellow
rgb(173,255,47) #ADFF2F hsl(84,100%,59%)
chartreuse
rgb(127,255,0) #7FFF00 hsl(90,100%,50%)
lawngreen
rgb(124,252,0) #7CFC00 hsl(90,100%,49%)
honeydew
rgb(240,255,240) #F0FFF0 hsl(120,100%,97%)
lightgreen
rgb(144,238,144) #90EE90 hsl(120,73%,75%)
palegreen
rgb(152,251,152) #98FB98 hsl(120,93%,79%)
darkseagreen
rgb(143,188,143) #8FBC8F hsl(120,25%,65%)
limegreen
rgb(50,205,50) #32Cd32 hsl(120,61%,50%)
lime
rgb(0,255,0) #00FF00 hsl(120,100%,50%)
forestgreen
rgb(34,139,34) #228B22 hsl(120,61%,34%)
green
rgb(0,128,0) #008000 hsl(120,100%,25%)
darkgreen
rgb(0,100,0) #006400 hsl(120,100%,20%)
seagreen
rgb(46,139,87) #2E8B57 hsl(146,50%,36%)
mediumseagreen
rgb(60,179,113) #3CB371 hsl(147,50%,47%)
mintcream
rgb(245,255,250) #F5FFFa hsl(150,100%,98%)
springgreen
rgb(0,255,127) #00FF7F hsl(150,100%,50%)
mediumspringgreen
rgb(0,250,154) #00Fa9a hsl(157,100%,49%)
aquamarine
rgb(127,255,212) #7FFFd4 hsl(160,100%,75%)
mediumaquamarine
rgb(102,205,170) #66Cdaa hsl(160,51%,60%)
turquoise
rgb(64,224,208) #40E0d0 hsl(174,72%,56%)
lightseagreen
rgb(32,178,170) #20B2aa hsl(177,70%,41%)
mediumturquoise
rgb(72,209,204) #48d1CC hsl(178,60%,55%)
azure
rgb(240,255,255) #F0FFFF hsl(180,100%,97%)
lightcyan
rgb(224,255,255) #E0FFFF hsl(180,100%,94%)
paleturquoise
rgb(175,238,238) #aFEEEE hsl(180,65%,81%)
cyan
rgb(0,255,255) #00FFFF hsl(180,100%,50%)
aqua
rgb(0,255,255) #00FFFF hsl(180,100%,50%)
darkslategray
rgb(47,79,79) #2F4F4F hsl(180,25%,25%)
darkcyan
rgb(0,139,139) #008B8B hsl(180,100%,27%)
teal
rgb(0,128,128) #008080 hsl(180,100%,25%)
darkturquoise
rgb(0,206,209) #00Ced1 hsl(181,100%,41%)
cadetblue
rgb(95,158,160) #5F9ea0 hsl(182,25%,50%)
powderblue
rgb(176,224,230) #b0E0E6 hsl(187,52%,80%)
deepskyblue
rgb(0,191,255) #00BFFF hsl(195,100%,50%)
lightblue
rgb(173,216,230) #ADD8e6 hsl(195,53%,79%)
skyblue
rgb(135,206,235) #87CEEB hsl(197,71%,73%)
lightskyblue
rgb(135,206,250) #87CeFa hsl(203,92%,75%)
steelblue
rgb(70,130,180) #4682B4 hsl(207,44%,49%)
aliceblue
rgb(240,248,255) #F0F8FF hsl(208,100%,97%)
dodgerblue
rgb(30,144,255) #1E90FF hsl(210,100%,56%)
lightslategray
rgb(119,136,153) #778899 hsl(210,14%,53%)
slategray
rgb(112,128,144) #708090 hsl(210,13%,50%)
lightsteelblue
rgb(176,196,222) #b0C4de hsl(214,41%,78%)
cornflowerblue
rgb(100,149,237) #6495ed hsl(219,79%,66%)
royalblue
rgb(65,105,225) #4169e1 hsl(225,73%,57%)
navy
rgb(0,0,128) #000080 hsl(240,100%,25%)
midnightblue
rgb(25,25,112) #191970 hsl(240,64%,27%)
mediumblue
rgb(0,0,205) #0000Cd hsl(240,100%,40%)
lavender
rgb(230,230,250) #E6e6Fa hsl(240,67%,94%)
ghostwhite
rgb(248,248,255) #F8F8FF hsl(240,100%,99%)
blue
rgb(0,0,139) #0000FF hsl(240,100%,50%)
darkblue
rgb(0,0,139) #00008B hsl(240,100%,27%)
slateblue
rgb(106,90,205) #6a5aCd hsl(248,53%,58%)
darkslateblue
rgb(72,61,139) #483D8B hsl(248,39%,39%)
mediumslateblue
rgb(123,104,238) #7B68EE hsl(249,80%,67%)
mediumpurple
rgb(147,112,219) #9370dB hsl(260,60%,65%)
rebeccapurple
rgb(102,51,153) #663399 hsl(270,50%,40%)
blueviolet
rgb(138,43,226) #8a2BE2 hsl(271,76%,53%)
indigo
rgb(75,0,130) #4B0082 hsl(275,100%,25%)
darkorchid
rgb(153,50,204) #9932CC hsl(280,61%,50%)
darkviolet
rgb(148,0,211) #9400d3 hsl(282,100%,41%)
mediumorchid
rgb(186,85,211) #ba55d3 hsl(288,59%,58%)
thistle
rgb(216,191,216) #D8BFD8 hsl(300,24%,80%)
plum
rgb(221,160,221) #Dda0dd hsl(300,47%,75%)
violet
rgb(238,130,238) #EE82EE hsl(300,76%,72%)
magenta
rgb(255,0,255) #FF00FF hsl(300,100%,50%)
fuchsia
rgb(255,0,255) #FF00FF hsl(300,100%,50%)
darkmagenta
rgb(139,0,139) #8B008B hsl(300,100%,27%)
purple
rgb(128,0,128) #800080 hsl(300,100%,25%)
orchid
rgb(218,112,214) #Da70d6 hsl(302,59%,65%)
mediumvioletred
rgb(199,21,133) #C71585 hsl(322,81%,43%)
deeppink
rgb(255,20,147) #FF1493 hsl(328,100%,54%)
hotpink
rgb(255,105,180) #FF69B4 hsl(330,100%,71%)
palevioletred
rgb(219,112,147) #DB7093 hsl(340,60%,65%)
lavenderblush
rgb(255,240,245 #FFF0F5 hsl(340,100%,97%)
crimson
rgb(220,20,60) #DC143C hsl(348,83%,47%)
pink
rgb(255,192,203) #FFC0Cb
hsl(350,100%,88%)
lightpink
rgb(255,182,193) #FFb6C1 hsl(351,100%,86%)
snow
rgb(255,250,250) #FFFaFa hsl(0,100%,99%)
white
rgb(255,255,255) #FFFFFF hsl(360,0%,100%)
whitesmoke
rgb(245,245,245) #F5F5F5 hsl(360,0%,96%)
gainsboro
rgb(220,220,220) #DCdCdC hsl(360,0%,86%)
lightgrey
rgb(211,211,211) #D3d3d3 hsl(360,0%,83%)
silver
rgb(192,192,192) #C0C0C0 hsl(360,0%,75%)
darkgray
rgb(169,169,169) #a9a9a9 hsl(360,0%,66%)
gray
rgb(128,128,128) #808080 hsl(360,0%,50%)
dimgray
rgb(105,105,105) #696969 hsl(360,0%,41%)
black
rgb(0,0,0) #000000 hsl(360,0%,0%)

CSS HSL vs. HSB in Adobe Photoshop

Der sRGB-Farbraum gibt Farben in CSS als hexadezimale Zeichenfolge an (z.B. color: #C0FFC0) oder in RGB-Notation (z.B. color: rgb(255,128,0)).

Im HSL-Farbraum sind Farben ganze Zahlen zwischen 0 bis 360 für den Farbwert. Sättigung oder Reinheit werden genauso wie die Helligkeit L in % geschrieben (z.b. color: hsl(60,75,95%)). Wer sich wundert, dass die Werte für Sättigung und Helligkeit etwas anders aussehen als in Photoshop: Der Farbwähler in Photoshop nutzt das HSV- oder HSB-Farbmodell, bei dem Sättigung und Helligkeit anders als für HSL berechnet werden. Diese beiden Farbmodelle sind sich sehr ähnlich, aber der Unterschied ist sichtbar und manchmal auch drastisch.

Das L in HSL steht für Lightness, das B in Photoshop HSB für Brightness. Unglücklich, dass beide Begriffe mit »Helligkeit« übersetzt werden.

Der CSS-Farbrechner rechnet Photoshop HSV/HSB nach CSS HSL, zeigt den RGB- und Hexwert der Farbe und – falls vorhanden – den Farbnamen.

Websichere Farben

Die websicheren Farben haben heute keine Bedeutung mehr. Jedes Handy kann mehr Farben anzeigen als der Farbmonitor der 90iger Jahre.

Alle Geräte (Monitor des Computers, Tabletts und Smartphone, TV) haben heute einen 24-Bit-Farbraum.