CSS, HTML und Javascript mit {stil}

Farbnamen, Farbcodes und numerische Werte

HTML Farbnamen und Farbcodes: RGB, HEX, HSL

Die Farbnamen mit den Farbcodes in Hex- und RGB-Werten zeigen zusätzlich die HSL-Werte der Farben. Im HSL-Farbraum können Farben nach Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) angeordnet werden (Color Picker zur Berechnung der HSL-Werte).

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. CSS3 übernimmt die Farbnamen aus der SVG-Spezifikation (Scalable Vector Graphics) (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 kann Farbwerte in HSL-Notation anzeigen.

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.