CSS Color Units

Farben machen Websites lebendig - in CSS gibt es dafür viele Schreibweisen. Ob Hex-Codes, RGB, HSL oder vordefinierte Farbnamen - jede Einheit hat ihren Zweck.

Farbnamen

Die einfachste Möglichkeit: vordefinierte Farbnamen wie red, blue oder goldenrod. Insgesamt unterstützt CSS über 140 benannte Farben, die von allen Browsern unterstützt werden.

CSS

/* Beispiel: vordefinierte Farbnamen */

.example1 {
    color: darkslategray;
    background-color: lightgoldenrodyellow;
}

Auswahl an Grundfarben

black

#000000

silver

#c0c0c0

gray

#808080

white

#ffffff

maroon

#800000

red

#ff0000

purple

#800080

fuchsia

#ff00ff

green

#008000

lime

#00ff00

olive

#808000

yellow

#ffff00

navy

#000080

blue

#0000ff

teal

#008080

steelblue

#4682b4

turquoise

#40e0d0

slateblue

#6a5acd

brown

#a52a2a

darkcyan

#008b8b

darkolivegreen

#556b2f

140+ CSS-Farbnamen anzeigen

Pink / Rosa

pink

#FFC0CB

lightpink

#FFB6C1

hotpink

#FF69B4

deeppink

#FF1493

mediumvioletred

#C71585

palevioletred

#DB7093

Rot

lightsalmon

#FFA07A

salmon

#FA8072

darksalmon

#E9967A

lightcoral

#F08080

indianred

#CD5C5C

crimson

#DC143C

firebrick

#B22222

red

#FF0000

darkred

#8B0000

Orange

coral

#FF7F50

tomato

#FF6347

orangered

#FF4500

gold

#FFD700

orange

#FFA500

darkorange

#FF8C00

Gelb

lightyellow

#FFFFE0

lemonchiffon

#FFFACD

lightgoldenrodyellow

#FAFAD2

papayawhip

#FFEFD5

moccasin

#FFE4B5

peachpuff

#FFDAB9

palegoldenrod

#EEE8AA

khaki

#F0E68C

darkkhaki

#BDB76B

yellow

#FFFF00

Braun

cornsilk

#FFF8DC

blanchedalmond

#FFEBCD

bisque

#FFE4C4

navajowhite

#FFDEAD

wheat

#F5DEB3

burlywood

#DEB887

tan

#D2B48C

rosybrown

#BC8F8F

sandybrown

#F4A460

goldenrod

#DAA520

darkgoldenrod

#B8860B

peru

#CD853F

chocolate

#D2691E

saddlebrown

#8B4513

sienna

#A0522D

brown

#A52A2A

maroon

#800000

Grün

greenyellow

#ADFF2F

chartreuse

#7FFF00

lawngreen

#7CFC00

lime

#00FF00

limegreen

#32CD32

palegreen

#98FB98

lightgreen

#90EE90

mediumspringgreen

#00FA9A

springgreen

#00FF7F

mediumseagreen

#3CB371

seagreen

#2E8B57

forestgreen

#228B22

green

#008000

darkgreen

#006400

yellowgreen

#9ACD32

olivedrab

#6B8E23

olive

#808000

darkolivegreen

#556B2F

mediumaquamarine

#66CDAA

darkseagreen

#8FBC8F

lightseagreen

#20B2AA

darkcyan

#008B8B

teal

#008080

Cyan / Türkis

aqua

#00FFFF

cyan

#00FFFF

lightcyan

#E0FFFF

paleturquoise

#AFEEEE

aquamarine

#7FFFD4

turquoise

#40E0D0

mediumturquoise

#48D1CC

darkturquoise

#00CED1

Blau

cadetblue

#5F9EA0

steelblue

#4682B4

lightsteelblue

#B0C4DE

powderblue

#B0E0E6

lightblue

#ADD8E6

skyblue

#87CEEB

lightskyblue

#87CEFA

deepskyblue

#00BFFF

dodgerblue

#1E90FF

cornflowerblue

#6495ED

royalblue

#4169E1

blue

#0000FF

mediumblue

#0000CD

darkblue

#00008B

navy

#000080

midnightblue

#191970

Lila / Violett

lavender

#E6E6FA

thistle

#D8BFD8

plum

#DDA0DD

violet

#EE82EE

orchid

#DA70D6

fuchsia

#FF00FF

magenta

#FF00FF

mediumorchid

#BA55D3

mediumpurple

#9370DB

rebeccapurple

#663399

blueviolet

#8A2BE2

darkviolet

#9400D3

darkorchid

#9932CC

darkmagenta

#8B008B

purple

#800080

indigo

#4B0082

slateblue

#6A5ACD

darkslateblue

#483D8B

mediumslateblue

#7B68EE

Weiß / Creme

white

#FFFFFF

snow

#FFFAFA

honeydew

#F0FFF0

mintcream

#F5FFFA

azure

#F0FFFF

aliceblue

#F0F8FF

ghostwhite

#F8F8FF

whitesmoke

#F5F5F5

seashell

#FFF5EE

beige

#F5F5DC

oldlace

#FDF5E6

floralwhite

#FFFAF0

ivory

#FFFFF0

antiquewhite

#FAEBD7

linen

#FAF0E6

lavenderblush

#FFF0F5

mistyrose

#FFE4E1

Grau / Schwarz

gainsboro

#DCDCDC

lightgray

#D3D3D3

lightgrey

#D3D3D3

silver

#C0C0C0

darkgray

#A9A9A9

darkgrey

#A9A9A9

gray

#808080

grey

#808080

dimgray

#696969

dimgrey

#696969

lightslategray

#778899

lightslategrey

#778899

slategray

#708090

slategrey

#708090

darkslategray

#2F4F4F

darkslategrey

#2F4F4F

black

#000000

HEX-Farben

HEX-Werte (Hexadezimal) bestehen aus sechs Zeichen: je zwei für Rot, Grün und Blau. Kurzschreibweise mit drei Zeichen ist ebenfalls möglich: #fff entspricht #ffffff.

CSS

/* Beispiel: HEX-Farben */

.example2 {
    background-color: #ff6600;  /* Orange */
    color: #fff;                /* Weiß */
}

Tipp

HEX-Werte sind kompakt und weit verbreitet - ideal für einheitliche Markenfarben.

RGB & RGBA

RGB steht für Red, Green, Blue. Jeder Wert reicht von 0 bis 255. Mit RGBA kann zusätzlich die Transparenz Alpha gesteuert werden - ein Wert zwischen 0 (transparent) und 1 (deckend).

CSS

/* Beispiel: RGB und RGBA */

.example3 {
    background-color: rgb(255, 0, 0);  /* Rot */
    color: rgba(255, 255, 255, 0.8);   /* Weiß mit Transparenz */
}

HSL & HSLA

HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Diese Schreibweise ist intuitiver: du kannst gezielt Farben aufhellen, abdunkeln oder sättigen.

CSS

/* Beispiel: HSL und HSLA */

.example4 {
    background-color: hsl(120, 50%, 50%);   /* Grünton */
    color: hsla(0, 0%, 100%, 0.9); /* Fast weiß */
}

Praxis-Tipp

HSL ist ideal, wenn du z. B. bei Hover-Effekten mit filter: brightness() oder dynamischen Farbabstufungen arbeitest.

Aktuelle CSS Color Funktionen (ab CSS Color Module 4)

Moderne Browser unterstützen neue Farbmodelle wie lab(), lch() oder color(). Damit lassen sich präzisere Farben darstellen - vor allem für Designer wichtig, die Farbräume besser kontrollieren wollen.

CSS

/* Beispiel: moderne CSS-Farbfunktionen */

.example5 {
    color: lab(50% 80 60);
    background-color: lch(70% 90 45);
}

Eine besonders praktische neue Funktion ist color-mix() zum Mischen von Farben direkt in CSS:

CSS

/* Beispiel: Farben mischen mit color-mix() */

.example-mix {
    /* 50% Rot + 50% Blau = Lila */
    background-color: color-mix(in srgb, red 50%, blue);
    
    /* Farbe aufhellen: 70% Original + 30% Weiß */
    --color-light: color-mix(in srgb, var(--color-primary) 70%, white);
    
    /* Farbe abdunkeln: 80% Original + 20% Schwarz */
    --color-dark: color-mix(in srgb, var(--color-primary) 80%, black);
}

Browser-Support

color-mix() wird seit 2023 von allen modernen Browsern unterstützt (Chrome 111+, Firefox 113+, Safari 16.2+).

Farbtransparenzen und Verlauf

Neben RGBA oder HSLA kannst du Farben auch mit opacity oder Farbverläufen kombinieren.

CSS

/* Transparente und Verlauf-Beispiele */

.example6 {
    background: linear-gradient(45deg, rgba(255,0,0,0.8), rgba(255,255,0,0.5));
    opacity: 0.95;
}

CSS Variablen für Farben

Mit CSS Custom Properties kannst du Farben zentral definieren und wiederverwenden - ideal für Themes und Dark Mode.

CSS

/* Beispiel: Farben als CSS-Variablen */

:root {
    --color-primary: #3498db;
    --color-primary-light: hsl(204, 70%, 60%);
    --color-text: rgb(51, 51, 51);
}

.button {
    background-color: var(--color-primary);
    color: white;
}

.button:hover {
    background-color: var(--color-primary-light);
}

Praxis-Tipp

HSL in Variablen ermöglicht einfache Farbvariationen: Ändere nur die Helligkeit für Hover-States.

Das currentColor Keyword

Mit currentColor übernimmst du automatisch die aktuelle Textfarbe color für andere Properties wie Borders oder SVG-Fills.

CSS

/* Beispiel: currentColor für konsistente Icons */

.link-with-icon {
    color: #3498db;
    border-bottom: 2px solid currentColor;
}

.link-with-icon svg {
    fill: currentColor;  /* SVG-Icon übernimmt Linkfarbe */
}

.link-with-icon:hover {
    color: #2980b9;  /* Border und Icon ändern sich automatisch mit */
}

Zusammenfassung

CSS bietet vielfältige Möglichkeiten, Farben zu definieren - von einfachen Namen über HEX bis zu präzisen Farbmodellen. Welche Einheit du nutzt, hängt davon ab, ob du lieber kreativ arbeitest oder exakt steuern willst.

Notation	Beispiel	Besonderheit
Color Name	`red`	Einfach, aber eingeschränkte Auswahl
HEX	`#ff6600`	Sehr verbreitet, unterstützt Alpha in `#RRGGBBAA`
RGB / RGBA	`rgb(255,0,0)` / `rgba(255,0,0,0.5)`	Numerische Kontrolle, Transparenz möglich
HSL / HSLA	`hsl(200, 50%, 50%)`	Einfach zu variieren und zu verstehen
LAB / LCH / color()	`lch(70% 90 45)`	Hohe Farbtreue, modern, noch eingeschränkt unterstützt
CSS Variablen	`var(--color-primary)`	Zentrale Definition, ideal für Themes
currentColor	`currentColor`	Übernimmt aktuelle Textfarbe
color-mix()	`color-mix(in srgb, red, blue)`	Farben direkt in CSS mischen

Tipp

Für UI-Design lohnt sich HSL oder LCH, weil man Farben logisch und systematisch verändern kann.

Mehr aus CSS

Tutorials werden geladen...