Entwicklung

Farbraum-Explorer – OKLCH, OKLab, P3 und mehr

Kostenloser Online-erweiterter Farbraumkonverter. Konvertieren Sie zwischen HEX, RGB, HSL, HWB, OKLab, OKLCH, Linear sRGB und Display P3 mit CSS-Ausgang. Keine Anmeldung erforderlich.

Kostenlos nutzbar Keine Anmeldung Läuft im Browser

Tool-Arbeitsbereich

HEX
#3B82F6
#3b82f6
RGB
59, 130, 246
rgb(59 130 246)
HSL
217.2deg, 91.2%, 59.8%
hsl(217.2 91.2% 59.8%)
HWB
217.2deg, 23.1%, 3.5%
hwb(217.2 23.1% 3.5%)
OKLab
L=0.6231, a=-0.0332, b=-0.1851
oklab(62.31% -0.0332 -0.1851)
OKLCH
L=0.6231, C=0.1880, H=259.8deg
oklch(62.31% 0.1880 259.8)
Linear sRGB
0.0437, 0.2232, 0.9216
color(srgb-linear 0.0437 0.2232 0.9216)
Display P3
0.3047, 0.5035, 0.9338
color(display-p3 0.3047 0.5035 0.9338)

Was sind moderne CSS-Farbräume?

CSS Color Level 4 führt mehrere neue Farbräume jenseits des traditionellen sRGB ein. OKLCH und OKLab bieten perzeptuell einheitliche Farbmanipulation, was bedeutet, dass gleiche numerische Veränderungen gleiche wahrgenommene Farbverschiebungen erzeugen. Display P3 ermöglicht breitere Farben auf modernen Displays. HWB (Hue, Whiteness, Blackness) bietet eine intuitive Alternative zu HSL. Dieses Tool konvertiert eine einzelne Farbeingabe in all diese Darstellungen mit gebrauchsfertiger CSS-Syntax.

Wie man diesen Farbraum-Explorer verwendet

  1. 1Geben Sie eine HEX-Farbe mit dem Farbwähler oder der Texteingabe ein.
  2. 2Zeigen Sie die Farbe, die in 8 verschiedene Farbräume umgewandelt wurde.
  3. 3Klicken Sie auf „Copy CSS“ neben einem beliebigen Format, um den CSS-ready-Wert zu kopieren.
  4. 4Verwenden Sie „OKLCH“-Werte für perzeptuell einheitliche Farbpaletten in modernen CSS.

Häufige Anwendungsfälle

Modernes CSS Design

Verwenden Sie OKLCH zum Erstellen von perzeptuell einheitlichen Farbpaletten in CSS.

Wide-Gamut-Farbarbeit

Konvertieren Sie sRGB-Farben in Display P3 für reichere Farben auf unterstützten Bildschirmen.

Color Science Education

Verstehen Sie, wie die gleiche Farbe in verschiedenen Farbmodellen dargestellt wird.

Häufig gestellte Fragen

Was ist der Vorteil von OKLCH gegenüber HSL?

OKLCH ist perzeptuell einheitlich, was bedeutet, dass gleiche Veränderungen in Helligkeit, Chroma oder Farbton visuell gleiche Veränderungen erzeugen. HSL ist nicht perzeptuell einheitlich, so dass zwei Farben mit der gleichen HSL-Sättigung in der wahrgenommenen Helligkeit sehr unterschiedlich erscheinen können.

Können Browser tatsächlich Display P3 Farben anzeigen?

Ja, moderne Browser auf Wide-Gamut-Displays (die meisten modernen Macs, iPhones und viele neuere Monitore) können Display-P3-Farben mit der CSS-Funktion color() rendern.

Was ist OKLab vs OKLCH?

OKLab verwendet L (Leichtigkeit), a (grün-rote Achse), b (blau-gelbe Achse) - ein kartesisches Modell. OKLCH verwendet L (Leichtigkeit), C (Chrom/Sättigung), H (Farbtonwinkel) - ein zylindrisches Modell. OKLCH ist intuitiver für die Auswahl von Farben.