CSS Farbnamen

Alle CSS-Farbnamen mit HEX-, RGB- und HSL-Werten. Klicken zum Kopieren.

#cd5c5c

indianred

hsl(0,53%,58%)

#f08080

lightcoral

hsl(0,79%,72%)

#fa8072

salmon

hsl(6,93%,71%)

#e9967a

darksalmon

hsl(15,72%,70%)

#dc143c

crimson

hsl(348,83%,47%)

#ff0000

red

hsl(0,100%,50%)

#b22222

firebrick

hsl(0,68%,42%)

#8b0000

darkred

hsl(0,100%,27%)

#ffc0cb

pink

hsl(350,100%,88%)

#ffb6c1

lightpink

hsl(351,100%,86%)

#ff69b4

hotpink

hsl(330,100%,71%)

#ff1493

deeppink

hsl(328,100%,54%)

#c71585

mediumvioletred

hsl(322,81%,43%)

#db7093

palevioletred

hsl(340,60%,65%)

#ffa07a

lightsalmon

hsl(17,100%,74%)

#ff7f50

coral

hsl(16,100%,66%)

#ff6347

tomato

hsl(9,100%,64%)

#ff4500

orangered

hsl(16,100%,50%)

#ff8c00

darkorange

hsl(33,100%,50%)

#ffa500

orange

hsl(39,100%,50%)

#ffd700

gold

hsl(51,100%,50%)

#ffff00

yellow

hsl(60,100%,50%)

#ffffe0

lightyellow

hsl(60,100%,94%)

#fffacd

lemonchiffon

hsl(54,100%,90%)

#fafad2

lightgoldenrodyellow

hsl(60,80%,90%)

#ffefd5

papayawhip

hsl(37,100%,92%)

#ffe4b5

moccasin

hsl(38,100%,85%)

#ffdab9

peachpuff

hsl(28,100%,86%)

#eee8aa

palegoldenrod

hsl(55,67%,80%)

#f0e68c

khaki

hsl(54,77%,75%)

#bdb76b

darkkhaki

hsl(56,38%,58%)

#adff2f

greenyellow

hsl(84,100%,59%)

#7fff00

chartreuse

hsl(90,100%,50%)

#7cfc00

lawngreen

hsl(90,100%,49%)

#00ff00

lime

hsl(120,100%,50%)

#32cd32

limegreen

hsl(120,61%,50%)

#98fb98

palegreen

hsl(120,93%,79%)

#90ee90

lightgreen

hsl(120,73%,75%)

#00fa9a

mediumspringgreen

hsl(157,100%,49%)

#00ff7f

springgreen

hsl(150,100%,50%)

#3cb371

mediumseagreen

hsl(147,50%,47%)

#2e8b57

seagreen

hsl(146,50%,36%)

#228b22

forestgreen

hsl(120,61%,34%)

#008000

green

hsl(120,100%,25%)

#006400

darkgreen

hsl(120,100%,20%)

#9acd32

yellowgreen

hsl(80,61%,50%)

#6b8e23

olivedrab

hsl(80,60%,35%)

#808000

olive

hsl(60,100%,25%)

#556b2f

darkolivegreen

hsl(82,39%,30%)

#66cdaa

mediumaquamarine

hsl(160,51%,60%)

#8fbc8f

darkseagreen

hsl(120,25%,65%)

#20b2aa

lightseagreen

hsl(177,70%,41%)

#008b8b

darkcyan

hsl(180,100%,27%)

#008080

teal

hsl(180,100%,25%)

#00ffff

aqua

hsl(180,100%,50%)

#00ffff

cyan

hsl(180,100%,50%)

#e0ffff

lightcyan

hsl(180,100%,94%)

#afeeee

paleturquoise

hsl(180,65%,81%)

#7fffd4

aquamarine

hsl(160,100%,75%)

#40e0d0

turquoise

hsl(174,72%,56%)

#48d1cc

mediumturquoise

hsl(178,60%,55%)

#00ced1

darkturquoise

hsl(181,100%,41%)

#5f9ea0

cadetblue

hsl(182,25%,50%)

#4682b4

steelblue

hsl(207,44%,49%)

#b0c4de

lightsteelblue

hsl(214,41%,78%)

#b0e0e6

powderblue

hsl(187,52%,80%)

#add8e6

lightblue

hsl(195,53%,79%)

#87ceeb

skyblue

hsl(197,71%,73%)

#87cefa

lightskyblue

hsl(203,92%,75%)

#00bfff

deepskyblue

hsl(195,100%,50%)

#1e90ff

dodgerblue

hsl(210,100%,56%)

#6495ed

cornflowerblue

hsl(219,79%,66%)

#7b68ee

mediumslateblue

hsl(249,80%,67%)

#4169e1

royalblue

hsl(225,73%,57%)

#0000ff

blue

hsl(240,100%,50%)

#0000cd

mediumblue

hsl(240,100%,40%)

#00008b

darkblue

hsl(240,100%,27%)

#000080

navy

hsl(240,100%,25%)

#191970

midnightblue

hsl(240,64%,27%)

#e6e6fa

lavender

hsl(240,67%,94%)

#d8bfd8

thistle

hsl(300,24%,80%)

#dda0dd

plum

hsl(300,47%,75%)

#ee82ee

violet

hsl(300,76%,72%)

#da70d6

orchid

hsl(302,59%,65%)

#ff00ff

fuchsia

hsl(300,100%,50%)

#ff00ff

magenta

hsl(300,100%,50%)

#ba55d3

mediumorchid

hsl(288,59%,58%)

#9370db

mediumpurple

hsl(260,60%,65%)

#663399

rebeccapurple

hsl(270,50%,40%)

#8a2be2

blueviolet

hsl(271,76%,53%)

#9400d3

darkviolet

hsl(282,100%,41%)

#9932cc

darkorchid

hsl(280,61%,50%)

#8b008b

darkmagenta

hsl(300,100%,27%)

#800080

purple

hsl(300,100%,25%)

#4b0082

indigo

hsl(275,100%,25%)

#6a5acd

slateblue

hsl(248,53%,58%)

#483d8b

darkslateblue

hsl(248,39%,39%)

#fff8dc

cornsilk

hsl(48,100%,93%)

#ffebcd

blanchedalmond

hsl(36,100%,90%)

#ffe4c4

bisque

hsl(33,100%,88%)

#ffdead

navajowhite

hsl(36,100%,84%)

#f5deb3

wheat

hsl(39,77%,83%)

#deb887

burlywood

hsl(34,57%,70%)

#d2b48c

tan

hsl(34,44%,69%)

#bc8f8f

rosybrown

hsl(0,25%,65%)

#f4a460

sandybrown

hsl(28,87%,67%)

#daa520

goldenrod

hsl(43,74%,49%)

#b8860b

darkgoldenrod

hsl(43,89%,38%)

#cd853f

peru

hsl(30,59%,53%)

#d2691e

chocolate

hsl(25,75%,47%)

#8b4513

saddlebrown

hsl(25,76%,31%)

#a0522d

sienna

hsl(19,56%,40%)

#a52a2a

brown

hsl(0,59%,41%)

#800000

maroon

hsl(0,100%,25%)

#ffffff

white

hsl(0,0%,100%)

#fffafa

snow

hsl(0,100%,99%)

#f0fff0

honeydew

hsl(120,100%,97%)

#f5fffa

mintcream

hsl(150,100%,98%)

#f0ffff

azure

hsl(180,100%,97%)

#f0f8ff

aliceblue

hsl(208,100%,97%)

#f8f8ff

ghostwhite

hsl(240,100%,99%)

#f5f5f5

whitesmoke

hsl(0,0%,96%)

#fff5ee

seashell

hsl(25,100%,97%)

#f5f5dc

beige

hsl(60,56%,91%)

#fdf5e6

oldlace

hsl(39,85%,95%)

#fffaf0

floralwhite

hsl(40,100%,97%)

#fffff0

ivory

hsl(60,100%,97%)

#faebd7

antiquewhite

hsl(34,78%,91%)

#faf0e6

linen

hsl(30,67%,94%)

#fff0f5

lavenderblush

hsl(340,100%,97%)

#ffe4e1

mistyrose

hsl(6,100%,94%)

#dcdcdc

gainsboro

hsl(0,0%,86%)

#d3d3d3

lightgray

hsl(0,0%,83%)

#c0c0c0

silver

hsl(0,0%,75%)

#a9a9a9

darkgray

hsl(0,0%,66%)

#808080

gray

hsl(0,0%,50%)

#696969

dimgray

hsl(0,0%,41%)

#778899

lightslategray

hsl(210,14%,53%)

#708090

slategray

hsl(210,13%,50%)

#2f4f4f

darkslategray

hsl(180,25%,25%)

#000000

black

hsl(0,0%,0%)

CSS-Farbnamen im Code verwenden

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

Vergleich der CSS-Farbformate

Format	Example	Best for
Named	rebeccapurple	Readability, quick prototyping
Hex	#663399	Design tools, copy/paste from Figma
RGB	rgb(102, 51, 153)	Programmatic manipulation
HSL	hsl(272, 50%, 40%)	Theming, lightness/saturation control
OKLCH	oklch(40% 0.15 305)	Perceptual uniformity, CSS Color 4

Farbkonverter-Tool

Zwischen Hex-, RGB-, HSL- und CMYK-Farbformaten konvertieren sofort.

Farbkonverter öffnen ->

Häufig gestellte Fragen

Wie viele benannte Farben unterstützt CSS?

CSS unterstützt 148 benannte Farben, die in der CSS Color Level 4-Spezifikation definiert sind, plus das spezielle Schlüsselwort 'transparent'. Dazu gehören die 16 ursprünglichen HTML-Farben, X11/SVG-Farben und Ergänzungen aus CSS3/4. Alle werden in modernen Browsern unterstützt.

Sind CSS-Farbnamen case-sensitiv?

Nein, CSS-Farbnamen sind nicht case-sensitiv. 'Red', 'red', 'RED' und 'rEd' liefern dasselbe Ergebnis. CamelCase (wie 'lightBlue') wird jedoch nicht verwendet — die Standardform ist alles in Kleinbuchstaben (lightblue).

Wann sollte ich benannte Farben statt Hex-Codes verwenden?

Verwende benannte Farben für schnelles Prototyping und bessere Lesbarkeit (z. B. ist 'red' klarer als '#ff0000'). Verwende Hex-Codes oder RGB für präzise Gestaltungsarbeit, bei der genaue Farbwerte wichtig sind, oder für Farben, die nicht in der benannten Palette vorhanden sind. HSL ist oft am besten für programmatische Farbmanipulation geeignet.

Was ist der Unterschied zwischen CSS-Farbnamen und HTML-Farbnamen?

HTML definierte ursprünglich 16 grundlegende Farbnamen. CSS erweiterte dies in CSS3 auf 141 Namen, und CSS Color Level 4 fügte 'rebeccapurple' hinzu und standardisierte den vollständigen X11-Farbsatz, womit die Gesamtzahl auf 148 stieg. Alle HTML-Farbnamen sind gültige CSS-Farbnamen.

CSS-Farbnamen im Code verwenden

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

Format

Example

Best for

Named

rebeccapurple

Readability, quick prototyping

Hex

#663399

Design tools, copy/paste from Figma

RGB

rgb(102, 51, 153)

Programmatic manipulation

HSL

hsl(272, 50%, 40%)

Theming, lightness/saturation control

OKLCH

oklch(40% 0.15 305)

Perceptual uniformity, CSS Color 4

Häufig gestellte Fragen

Wie viele benannte Farben unterstützt CSS?

Sind CSS-Farbnamen case-sensitiv?

Wann sollte ich benannte Farben statt Hex-Codes verwenden?

Was ist der Unterschied zwischen CSS-Farbnamen und HTML-Farbnamen?

CSS Farbnamen

CSS-Farbnamen im Code verwenden

Vergleich der CSS-Farbformate

Farbkonverter-Tool

Häufig gestellte Fragen

Color & design

CSS Farbnamen

CSS-Farbnamen im Code verwenden

Vergleich der CSS-Farbformate

Farbkonverter-Tool

Häufig gestellte Fragen