Farbkonverter

Funktionen

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Visuelle Farbauswahl

Live-Vorschau

Ausgabe als CSS-Variablen

Anleitung

1. Farbe wählen (oder auf die Fläche klicken, einen HEX-Wert einfügen, die Pipette nutzen oder mit der Leertaste eine Zufallsfarbe erzeugen).

2. Alle Formate — HEX, RGB, HSL, OKLCH — werden live in beide Richtungen umgerechnet.

3. Einzelne Werte oder den ganzen CSS-Variablenblock kopieren; die Arbeitsfläche umschalten, um die Farbe auf Weiß, Grau oder Dunkel zu beurteilen.

Über dieses Werkzeug

Designer wählen Farben nach Augenmaß, CSS braucht einen String, und jedes Werkzeug spricht ein anderes Format. Dieser Konverter hält eine Farbe in HEX, RGB, HSL und OKLCH synchron: Ändern Sie ein beliebiges Feld oder nutzen Sie den Farbwähler, und alle anderen Werte aktualisieren sich sofort. HEX und RGB beschreiben den Rot-, Grün- und Blaukanal; HSL beschreibt Farbton, Sättigung und Helligkeit, was sich von Hand leichter anpassen lässt; OKLCH ist ein neueres, wahrnehmungsbasiertes Format aus CSS Color Level 4, in dem gleiche Helligkeitsschritte für das Auge gleich aussehen – ideal für konsistente Paletten. Sie können einen einzelnen Wert oder einen fertigen Block mit CSS Custom Properties kopieren und die Farbe vor weißem, grauem oder dunklem Umfeld prüfen, bevor Sie sie verwenden.

Häufig gestellte Fragen

Welches Format sollte ich in CSS verwenden?

HEX und rgb() funktionieren überall und eignen sich gut für feste Farben. hsl() ist praktisch, wenn Sie Helligkeit oder Sättigung von Hand anpassen möchten. oklch() wird von aktuellen Browsern unterstützt und eignet sich am besten für systematische Paletten, weil seine Helligkeit wahrnehmungsgleichmäßig ist.

Warum wirken HSL-Farben mit 50 % Helligkeit so unterschiedlich hell?

HSL ist eine mathematische Umformung von RGB, kein Modell des menschlichen Sehens – ein Gelb mit 50 % wirkt daher viel heller als ein Blau mit 50 %. Die Helligkeit von OKLCH ist auf die wahrgenommene Helligkeit abgestimmt, weshalb das Format zunehmend in Designsystemen eingesetzt wird.

Warum weicht ein umgerechneter Wert beim Zurückrechnen leicht ab?

HEX und RGB speichern ganze Zahlen von 0 bis 255, HSL und OKLCH verwenden Dezimalzahlen. Durch Rundung bei der Umrechnung kann sich ein Kanal um eine Stufe verschieben, was mit bloßem Auge nicht sichtbar ist.

Kann ich eine Farbe von einer anderen Stelle des Bildschirms aufnehmen?

In Browsern mit Unterstützung der EyeDropper-API, etwa Chrome und Edge am Desktop, können Sie mit der Pipette jedes Pixel auf dem Bildschirm aufnehmen. Andere Browser zeigen stattdessen den normalen Farbwähler.

Was enthält der Block mit CSS-Variablen?

Er listet dieselbe Farbe als Custom Properties in mehreren Formaten auf, zum Beispiel --color-hex, --color-rgb, --color-hsl und --color-oklch, damit Sie sie in :root einfügen und das jeweils benötigte Format referenzieren können.

Funktionen

Anleitung

Über dieses Werkzeug

Häufig gestellte Fragen

Verwandte Werkzeuge