KONVERTER-TOOL

Color Naming Converter

Wandle Farbwerte zwischen HEX, RGB, HSL, HSV und CMYK um. Mit CSS-Farbnamen-Lookup, Kontrast-Checker und Light/Dark-Mode-Vorschau.

HEX / RGB HSL / HSV Farbnamen Kontrast

Hinweis: Alle Umrechnungen erfolgen lokal im Browser. Farbnamen entsprechen den CSS Color Names (W3C) und X11-Farbnamen. Die Kontrast-Prüfung folgt den WCAG 2.1-Richtlinien.

Inhaltsverzeichnis

             Schnellübersicht
            Multi-Konverter: HEX, RGB, HSL, HSV, CMYK, CSS
Farbnamen-Lookup: 148 CSS-Farben + X11-Namen
Farbwähler: Native Browser Color Picker
Kontrast-Checker: WCAG AA/AAA-Prüfung
Live-Vorschau: Light & Dark Mode parallel
Farbpalette: 40 Basis-Farben zum Klicken
Theorie: Über Farbmodelle und Formate
FAQ: Häufige Fragen zu Farbkonvertierung

        

1. Farbkonverter

Gib einen Farbwert in beliebigem Format ein – alle anderen Formate werden automatisch berechnet.

Native Farbauswahl Klicke, um eine Farbe visuell auszuwählen

HEX z.B. #E91E63 oder E91E63

RGB z.B. 233, 30, 99 oder rgb(233,30,99)

HSL z.B. 340, 82%, 52%

HSV z.B. 340, 87%, 91%

CMYK z.B. 0, 87, 58, 9

Farbname CSS/X11-Name

#E91E63

Pink / Rose

Alle Formate

Bekannte Farbnamen

Kontrast-Prüfung (WCAG 2.1)

Beliebte Farben

2. Theorie – Farbmodelle

Verstehe die Grundlagen von Farbmodellen und Formaten.

Was ist HEX?

HEX (Hexadezimal) ist das Standard-Format für Web-Farben:

Format: #RRGGBB (6 Hex-Zeichen)
Beispiel: #E91E63
RR: Rot-Anteil (00-FF)
GG: Grün-Anteil (00-FF)
BB: Blau-Anteil (00-FF)

#E91E63 = R:233 G:30 B:99

RGB vs. HSL

RGB und HSL sind zwei Modelle:

RGB: Rot, Grün, Blau (additiv)
HSL: Hue, Saturation, Lightness
RGB ideal für: Bildschirme, LED
HSL ideal für: Farb-Anpassungen

HSL 340°, 82%, 52% = #E91E63

CMYK für Druck

CMYK ist das Druck-Farbmodell:

Cyan: Blau-Grün
Magenta: Rot-Pink
Yellow: Gelb
Key/Black: Schwarz
Subtraktiv: Für Papier

CMYK: 0%, 87%, 58%, 9%

CSS-Farbnamen

CSS kennt 148 benannte Farben:

Basisfarben: red, blue, green
Erweiterte: crimson, salmon, tomato
Grautöne: gray, silver, whitesmoke
X11-Namen: Ähnlich, aber nicht identisch
Vorteil: Lesbarer Code

color: crimson; = #DC143C

Wussten Sie schon?

Der HEX-Wert #E91E63 entspricht dem Material Design "Pink 500".
CSS kennt 148 benannte Farben – von "aliceblue" bis "yellowgreen".
Die Farbe "Magenta" ist in CMYK und RGB unterschiedlich definiert.
HSL ist besser für Farb-Anpassungen (z.B. heller/dunkler).
Der Kontrast-Ratio nach WCAG sollte mindestens 4,5:1 für Text sein.

3. Geschichte der Farbmodelle

Von RGB zu HSL und moderner Web-Farbverwaltung.

1931

CIE-Farbraum

Die CIE (Commission Internationale de l'Éclairage) definiert den ersten wissenschaftlichen Farbraum. Grundlage für alle modernen Farbmodelle.

1970er

RGB-Standard

RGB wird zum Standard für Fernseher und Monitore. Additive Farbmischung – perfekt für selbstleuchtende Bildschirme.

1980er

CMYK im Druck

CMYK wird Standard für den Vierfarbdruck. Subtraktive Farbmischung – ideal für Papier und reflektierendes Licht.

1996

CSS1 und Web-Farben

CSS1 definiert 16 Basis-Farbnamen (red, blue, green, ...). Erste Web-Farben-Standardisierung.

1999

CSS Color Module

CSS Color Module Level 3 fügt HSL, RGBA und 147 weitere Farbnamen hinzu. Web-Farben werden flexibel.

2018

CSS Color 4

CSS Color Module Level 4 führt HWB, LAB und LCH ein. Moderne Farbverwaltung wird möglich.

Heute

Wide-Gamut-Farben

Display-P3 und Rec. 2020 erweitern den Farbraum. Moderne Displays können Farben darstellen, die sRGB nicht abdeckt.

4. FAQ – Häufige Fragen

Häufige Fragen zu Farben

Was ist der Unterschied zwischen HEX, RGB und HSL?

Alle drei beschreiben dieselbe Farbe – nur unterschiedliche Notation:

Format	Beispiel	Verwendung
HEX	#E91E63	Web, kompakt
RGB	rgb(233, 30, 99)	Screens, LED
HSL	hsl(340, 82%, 52%)	Farb-Anpassung

Empfehlung:

HEX: Für statische Farben
RGB(A): Für Transparenz
HSL: Für dynamische Anpassungen (heller/dunkler)

Wie funktioniert die Hex-Notation?

Hex verwendet 6 Zeichen für die 3 Farbkanäle:

Format: #RRGGBB
RR: Rot (00-FF = 0-255)
GG: Grün (00-FF = 0-255)
BB: Blau (00-FF = 0-255)

Beispiel: #E91E63

E9 = 233 (Rot)
1E = 30 (Grün)
63 = 99 (Blau)

Kurzform:

#FFF = #FFFFFF (Weiß)
#F00 = #FF0000 (Rot)
#08F = #0088FF (Hellblau)

Was bedeutet HSL und wofür nutze ich es?

HSL = Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit):

Hue (H): 0-360° – Farbwinkel auf dem Farbkreis
Saturation (S): 0-100% – Grau bis Vollfarbe
Lightness (L): 0-100% – Schwarz bis Weiß

Vorteile:

Intuitiv: Farbton, Sättigung, Helligkeit
Anpassbar: Nur L ändern → heller/dunkler
Harmonisch: H um 30° drehen → Farbharmonie
Ideal für: Themes, Hover-States

Beispiel: hsl(340, 82%, 52%) = Pink

Wie viele CSS-Farbnamen gibt es?

CSS kennt 148 benannte Farben (Level 4):

Basisfarben (16): red, green, blue, black, white, ...
Erweitert (132): crimson, salmon, tomato, turquoise, ...

Beliebte Namen:

Name	Hex	Farbe
crimson	#DC143C	Karmesinrot
salmon	#FA8072	Lachs
tomato	#FF6347	Tomate
turquoise	#40E0D0	Türkis
indigo	#4B0082	Indigo

Hinweis: X11-Namen sind ähnlich, aber nicht identisch!

Was ist CMYK und wann nutze ich es?

CMYK = Cyan, Magenta, Yellow, Key (Schwarz):

Cyan: Blau-Grün (0-100%)
Magenta: Rot-Pink (0-100%)
Yellow: Gelb (0-100%)
Key/Black: Schwarz (0-100%)

Wann nutzen?

Nur für Druck: Bücher, Flyer, Poster
Subtraktiv: Farben werden gemischt
Farbraum: Kleiner als RGB
Pantone: Sonderfarben für Marken

Wichtig: RGB-Farben sind am Bildschirm oft leuchtender als im Druck!

Was ist der WCAG-Kontrast?

WCAG (Web Content Accessibility Guidelines) definiert Kontrast-Anforderungen:

Level	Normaler Text	Großer Text
AA (Minimum)	4.5:1	3:1
AAA (Erhöht)	7:1	4.5:1

Formel:

Relative Luminanz berechnen
Ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = hellere Farbe, L2 = dunklere

Warum wichtig?

Barrierefreiheit: Lesbarkeit für alle
Rechtlich: Pflicht in manchen Ländern
UX: Bessere Lesbarkeit

Was ist der Unterschied zwischen RGB und sRGB?

RGB ist ein Farbmodell, sRGB ein Farbraum:

RGB: Modell (Rot, Grün, Blau)
sRGB: Spezifischer Farbraum (Standard)
Adobe RGB: Größerer Farbraum für Profis
Display P3: Moderner Apple-Standard

Wichtig:

sRGB: Web-Standard (99% aller Seiten)
Adobe RGB: Fotografie, Druck
Display P3: Neue iPhones, Macs
Rec. 2020: 4K/8K-Fernseher

Farbraum-Konvertierung: Farben können außerhalb sRGB nicht exakt dargestellt werden!

Welches Format sollte ich für Web nutzen?

Empfehlungen für modernes Web:

Situation	Empfehlung
Statische Farben	`#E91E63` (HEX)
Transparenz	`rgba(233, 30, 99, 0.5)`
Theme-Farben	`hsl(340, 82%, 52%)`
CSS-Variablen	`var(--primary)`
Moderne Syntax	`oklch(60% 0.2 340)`

Best Practices:

Konsistent: Ein Format pro Projekt
CSS-Variablen: Für Themes
HSL für Hover: Nur L anpassen
OKLCH (neu): Perceptuell gleichmäßig

Zusammenfassung

Die wichtigsten Punkte

HEX: #RRGGBB (Web-Standard)
RGB: rgb(R, G, B) – additiv für Bildschirme
HSL: hsl(H, S%, L%) – intuitiv für Anpassungen
HSV: Ähnlich HSL, aber Helligkeit anders
CMYK: Subtraktiv für Druck
CSS-Farbnamen: 148 benannte Farben
Kontrast: WCAG AA 4.5:1, AAA 7:1
Farbmodell: RGB (Bildschirm) vs. CMYK (Druck)
Farbräume: sRGB (Web), Adobe RGB, Display P3
Unser Tool: Konverter mit Farbnamen-Lookup und Kontrast-Checker

Weitere Tools

Farbpalette Generator

Erstelle harmonische Farbpaletten für dein Design.

Zum Tool

Farbkontrast Checker

Prüfe den Kontrast zwischen zwei Farben (WCAG).

Zum Tool

Farbkonverter

Konvertiere zwischen HEX, RGB, HSL und mehr.

Zum Tool

CSS Shadow Generator

Erstelle CSS-Box-Shadows und Text-Shadows.

Zum Tool