So funktioniert es
Dieselbe Farbe kann auf viele Arten geschrieben werden. HEX (#RRGGBB) und RGB beschreiben die Mischung aus Rot, Grün und Blau; HSL und HSV beschreiben sie über Farbton, Sättigung und Helligkeit, intuitiver zur Wahl von Varianten; und CMYK zielt auf den Druck.
Dieses Tool nimmt eine Farbe in HEX, RGB oder HSL und übersetzt sie sofort in alle Formate, einschließlich moderner CSS-Level-4-Räume wie HWB, LAB, LCH, OKLab, OKLCh und die color()-Funktionen (Display P3, Rec. 2020, ProPhoto).
Der visuelle Farbwähler und die numerischen Regler ermöglichen es, die Farbe anzupassen und zu sehen, wie sich alle Werte gleichzeitig ändern. Alles wird in deinem Browser berechnet.
Beispiele
#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Reines Rot: Maximum im Rotkanal, Null in Grün und Blau.#3b82f6rgb(59 130 246)Jedes Paar Hexadezimalziffern (3b, 82, f6) ist der 0-255-Wert eines Kanals: 59, 130 und 246.#ffffffrgb(255 255 255) · hsl(0 0% 100%)Weiß hat alle drei Kanäle auf Maximum; in HSL Helligkeit 100 %.Anwendungsfälle
- Eine HEX-Farbe aus einem Design-Guide in das von deinem CSS oder Framework geforderte RGB- oder HSL-Format umwandeln.
- Das CMYK-Äquivalent einer Bildschirmfarbe erhalten, um ein Druckmaterial vorzubereiten.
- Moderne Farbräume (OKLCh, Display P3) erkunden, wenn eine Palette mit weitem Gamut abgestimmt wird.
Häufige Fragen
Was ist der Alphakanal und wie wird er in HEX geschrieben?
Alpha ist die Deckkraft, von 0 (transparent) bis 100 %. In HEX wird es als Ziffernpaar am Ende hinzugefügt: #RRGGBBAA. Zum Beispiel ist #ff000080 Rot mit 50 % Deckkraft.
Was ist der Unterschied zwischen HSL und HSV?
Beide verwenden Farbton und Sättigung, aber die dritte Achse unterscheidet sich: HSL verwendet die Helligkeit (wobei 100 % Weiß ist) und HSV den Wert oder die Helligkeit (wobei 100 % die intensivste Farbe ist). HSL ist meist bequemer, um Tönungen und Schattierungen zu erzeugen.
Warum gibt es OKLab und OKLCh?
Es sind wahrnehmungsgleichförmige Räume: Gleiche Abstände zwischen Werten entsprechen ähnlichen visuellen Unterschieden. Sie erzeugen natürlichere Verläufe und Helligkeitsanpassungen als HSL, und CSS unterstützt sie seit Level 4.
Ist das angezeigte CMYK für den Druck genau?
Es ist eine ungefähre Referenzumrechnung. Das tatsächliche Druckergebnis hängt vom Farbprofil, der Tinte und dem Papier ab, daher ist es für professionelle Arbeiten am besten, das ICC-Profil der Druckerei zu verwenden.