CSS, HTML und Javascript mit {stil}

Farbnamen, Farbcodes und numerische Farbwerte

Farbnamen statt RGB oder Hex-Farben nach Zahlen

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.

.d1 { background: gold; }
.d2 { background: orange; }
.d3 { background: ivory; }
.d4 { background: beige; }

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.

HSL-Angaben für Farben und Hintergrund wird ab IE9 unterstützt.

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

Rot

rgb(255,0,0) #FF0000 hsl(0,100%,50%)
darkred

Dunkelrot

rgb(139,0,0) #8B0000 hsl(0,100%,27%)
lightcoral

Helles Korallrot

rgb(240,128,128) #F08080 hsl(0,79%,72%)
firebrick

Feuerrot

rgb(178,34,34) #B22222 hsl(0,68%,42%)
brown

Braun

rgb(165,42,42) #A52A2A hsl(0,59%,41%)
indianred

Indianerrot

rgb(205,92,92) #CD5C5C hsl(0,53%,58%)
rosybrown

Dunkles Rosa

rgb(188,143,143) #BC8F8F hsl(0,25%,65%)
maroon

Kastanienbraun

rgb(128,0,0) #800000 hsl(0,100%,25%)
mistyrose

Helles Rosa

rgb(255,228,225) #FFE4e1 hsl(6,100%,94%)
salmon

Lachsrosa

rgb(250,128,114) #FA8072 hsl(6,93%,71%)
tomato

Tomatenrot

rgb(255,99,71) #FF6347 hsl(9,100%,64%)
darksalmon

Dunkles Lachsrosa

rgb(233,150,122) #E9967A hsl(15,72%,70%)
coral

Korallenrot

rgb(255,127,80) #FF7F50 hsl(16,100%,66%)
orangered

Orangerot

rgb(255,69,0) #FF4500 hsl(16,100%,50%)
lightsalmon

Helles Lachsrosa

rgb(255,160,122) #FFA07A hsl(17,100%,74%)
sienna

Siennabraun

rgb(160,82,45) #A0522D hsl(19,56%,40%)
chocolate

Schokoladenbraun

rgb(210,105,30) #D2691E hsl(25,75%,47%)
saddlebrown

Umbra

rgb(139,69,19) #8B4513 hsl(25,76%,31%)
seashell

Muschelschale

rgb(255,245,238) #FFF5EE hsl(25,100%,97%)
peachpuff

Puder, Pfirsichrosa

rgb(255,218,185) #FFDAB9 hsl(28,100%,86%)
sandybrown

Sandbraun

rgb(244,164,96) #F4A460 hsl(28,87%,67%)
linen

Leinen

rgb(250,240,230) #FAF0E6 hsl(30,67%,94%)
peru

Braun

rgb(205,133,63) #CD853F hsl(30,59%,53%)
bisque

Biskuit

rgb(255,228,196) #FFE4C4 hsl(33,100%,88%)
darkorange

Dunkles Orange

rgb(255,140,0) #FF8C00 hsl(33,100%,50%)
antiquewhite

Altweiß

rgb(250,235,215) #FAEBd7 hsl(34,78%,91%)
tan

Hautfarben

rgb(210,180,140) #D2B48C hsl(34,44%,69%)
burlywood

Blasses Orange

rgb(222,184,135) #DEB887 hsl(34,57%,70%)
blanchedalmond

Mandelfarben

rgb(255,235,205) #FFEBCD hsl(36,100%,90%)
navajowhite

Blasses Orangegelb

rgb(255,222,173) #FFdEAD hsl(36,100%,84%)
papayawhip

Helles Orangegelb

rgb(255,239,213) #FFEFd5 hsl(37,100%,92%)
moccasin

Helles Orange

rgb(255,228,181) #FFE4B5 hsl(38,100%,85%)
oldlace
rgb(253,245,230) #FdF5E6 hsl(39,85%,95%)
wheat

Weizengelb

rgb(245,222,179) #F5DEB3 hsl(39,97%,83%)
orange

Orange

rgb(255,165,0) #FFA500 hsl(39,100%,50%)
floralwhite

Blütenweiß

rgb(255,250,240) #FFFAF0 hsl(40,100%,97%)
goldenrod

Goldrute

rgb(218,165,32) #DAA520 hsl(43,74%,49%)
darkgoldenrod

Dunkle Goldrute

rgb(184,134,11) #B8860B hsl(43,89%,38%)
cornsilk

Helles Maisgelb

rgb(255,248,220) #FFF8DC hsl(48,100%,93%)
gold

Gold

rgb(255,215,0) #FFD700 hsl(51,100%,50%)
khaki

Khaki, Erdfarben

rgb(240,230,140) #F0E68C hsl(54,77%,75%)
lemonchiffon

Zartes Zitronengelb

rgb(255,250,205) #FFFACD hsl(54,100%,90%)
palegoldenrod

Blasse Goldrute

rgb(238,232,170) #EEE8AA hsl(55,67%,80%)
darkkhaki

Dunkler Erdton

rgb(189,183,107) #BDB76B hsl(56,38%,58%)
beige

Beige

rgb(245,245,220) #F5F5DC hsl(60,56%,91%)
lightgoldenrodyellow
rgb(250,250,210) #FAFAD2 hsl(60,80%,90%)
ivory

Elfenbein

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

Olive

rgb(128,128,0) #808000 hsl(60,100%,25%)
yellowgreen

Gelbgrün

rgb(154,205,50) #9aCd32 hsl(80,61%,50%)
olivedrab

Graugrün

rgb(107,142,35) #6B8e23 hsl(80,60%,35%)
darkolivegreen

Dunkles Olivegrün

rgb(85,107,47) #556B2F hsl(82,39%,30%)
greenyellow

Grüngelb

rgb(173,255,47) #ADFF2F hsl(84,100%,59%)
chartreuse

Chartreuse

rgb(127,255,0) #7FFF00 hsl(90,100%,50%)
lawngreen

Grasgrün

rgb(124,252,0) #7CFC00 hsl(90,100%,49%)
honeydew

Honigmelone

rgb(240,255,240) #F0FFF0 hsl(120,100%,97%)
lightgreen

Hellgrün

rgb(144,238,144) #90EE90 hsl(120,73%,75%)
palegreen

Blasses Grün

rgb(152,251,152) #98FB98 hsl(120,93%,79%)
darkseagreen
rgb(143,188,143) #8FBC8F hsl(120,25%,65%)
limegreen

Limonengrün

rgb(50,205,50) #32Cd32 hsl(120,61%,50%)
lime

Limone

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

Dunkelgrün

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

Mintgrün

rgb(245,255,250) #F5FFFa hsl(150,100%,98%)
springgreen

Frühlingsgrün

rgb(0,255,127) #00FF7F hsl(150,100%,50%)
mediumspringgreen
rgb(0,250,154) #00Fa9a hsl(157,100%,49%)
aquamarine

Aquamarin

rgb(127,255,212) #7FFFd4 hsl(160,100%,75%)
mediumaquamarine
rgb(102,205,170) #66Cdaa hsl(160,51%,60%)
turquoise

Türkis

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

Himmelblau

rgb(240,255,255) #F0FFFF hsl(180,100%,97%)
lightcyan

Helles Zyan

rgb(224,255,255) #E0FFFF hsl(180,100%,94%)
paleturquoise

Blasses Türkis

rgb(175,238,238) #aFEEEE hsl(180,65%,81%)
cyan

Zyan

rgb(0,255,255) #00FFFF hsl(180,100%,50%)
aqua

Aquamarinblau

rgb(0,255,255) #00FFFF hsl(180,100%,50%)
darkslategray
rgb(47,79,79) #2F4F4F hsl(180,25%,25%)
darkcyan

Dunkles Zyan

rgb(0,139,139) #008B8B hsl(180,100%,27%)
teal

Blaugrün

rgb(0,128,128) #008080 hsl(180,100%,25%)
darkturquoise
rgb(0,206,209) #00Ced1 hsl(181,100%,41%)
cadetblue

Kadettblau

rgb(95,158,160) #5F9ea0 hsl(182,25%,50%)
powderblue

Puderblau

rgb(176,224,230) #b0E0E6 hsl(187,52%,80%)
deepskyblue

Tiefes Himmelblau

rgb(0,191,255) #00BFFF hsl(195,100%,50%)
lightblue

Hellblau

rgb(173,216,230) #ADD8e6 hsl(195,53%,79%)
skyblue

Himmelblau

rgb(135,206,235) #87CEEB hsl(197,71%,73%)
lightskyblue

Helles Himmelblau

rgb(135,206,250) #87CeFa hsl(203,92%,75%)
steelblue

Stahlblau

rgb(70,130,180) #4682B4 hsl(207,44%,49%)
aliceblue
rgb(240,248,255) #F0F8FF hsl(208,100%,97%)
dodgerblue

Blau der Los Angeles Dodgers

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

Kornblumenblau

rgb(100,149,237) #6495ed hsl(219,79%,66%)
royalblue

Königsblau

rgb(65,105,225) #4169e1 hsl(225,73%,57%)
navy

Marineblau

rgb(0,0,128) #000080 hsl(240,100%,25%)
midnightblue

Mitternachtsblau

rgb(25,25,112) #191970 hsl(240,64%,27%)
mediumblue
rgb(0,0,205) #0000Cd hsl(240,100%,40%)
lavender

Fliederblau, Lavendel

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

Schlieferblau

rgb(106,90,205) #6a5aCd hsl(248,53%,58%)
darkslateblue

dunkles Schieferblau

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

Indigoblau

rgb(75,0,130) #4B0082 hsl(275,100%,25%)
darkorchid
rgb(153,50,204) #9932CC hsl(280,61%,50%)
darkviolet

Dunkelviolett

rgb(148,0,211) #9400d3 hsl(282,100%,41%)
mediumorchid
rgb(186,85,211) #ba55d3 hsl(288,59%,58%)
thistle

Distelblau

rgb(216,191,216) #D8BFD8 hsl(300,24%,80%)
plum

Pflaumenblau

rgb(221,160,221) #Dda0dd hsl(300,47%,75%)
violet

Violett

rgb(238,130,238) #EE82EE hsl(300,76%,72%)
magenta

Magenta, Fuchsie

rgb(255,0,255) #FF00FF hsl(300,100%,50%)
fuchsia

Fuchsie, Magenta

rgb(255,0,255) #FF00FF hsl(300,100%,50%)
darkmagenta

Dunkles Magenta

rgb(139,0,139) #8B008B hsl(300,100%,27%)
purple

Purpur

rgb(128,0,128) #800080 hsl(300,100%,25%)
orchid

Helles Violett

rgb(218,112,214) #Da70d6 hsl(302,59%,65%)
mediumvioletred

Violettrot

rgb(199,21,133) #C71585 hsl(322,81%,43%)
deeppink

Kräftiges Pink

rgb(255,20,147) #FF1493 hsl(328,100%,54%)
hotpink

Leuchtendes Pink

rgb(255,105,180) #FF69B4 hsl(330,100%,71%)
palevioletred

Blasses Lila

rgb(219,112,147) #DB7093 hsl(340,60%,65%)
lavenderblush

Heller Fliederton

rgb(255,240,245 #FFF0F5 hsl(340,100%,97%)
crimson

Purpur

rgb(220,20,60) #DC143C hsl(348,83%,47%)
pink

Pink

rgb(255,192,203) #FFC0Cb
hsl(350,100%,88%)
lightpink

Helles Pink

rgb(255,182,193) #FFb6C1 hsl(351,100%,86%)
snow
rgb(255,250,250) #FFFaFa hsl(0,100%,99%)
white

Weiß

rgb(255,255,255) #FFFFFF hsl(360,0%,100%)
whitesmoke

Zartes Hellgrau

rgb(245,245,245) #F5F5F5 hsl(360,0%,96%)
gainsboro

Hellgrau

rgb(220,220,220) #DCdCdC hsl(360,0%,86%)
lightgrey

Hellgrau

rgb(211,211,211) #D3d3d3 hsl(360,0%,83%)
silver

Silbergrau

rgb(192,192,192) #C0C0C0 hsl(360,0%,75%)
darkgray

Dunkelgrau

rgb(169,169,169) #a9a9a9 hsl(360,0%,66%)
gray

Grau

rgb(128,128,128) #808080 hsl(360,0%,50%)
dimgray

Dunkelgrau

rgb(105,105,105) #696969 hsl(360,0%,41%)
black

Schwarz

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.