Farbkonverter: HEX, RGB, HSL, CMYK, OKLCH

Die Notationen und wann Sie welche verwenden

HEX

#rrggbb, oder #rrggbbaa mit Alpha. Die Kurzform #rgb verdoppelt jede Ziffer. Der Standard in Designtools und CSS.

RGB

Rot, Grün und Blau von 0 bis 255. Modernes CSS schreibt rgb(42 157 143 / 50%); das ältere rgba(42, 157, 143, 0.5) funktioniert weiterhin überall.

HSL

Farbton in Grad, Sättigung und Helligkeit in Prozent. Leicht von Hand anzupassen, aber 50 % Helligkeit wirken nicht bei allen Farbtönen gleich hell: Gelb sieht viel heller aus als Blau.

HSV / HSB

Farbton, Sättigung und Hellwert (Value bzw. Brightness). Das Modell hinter den Farbwählern in Photoshop, Figma und den meisten Design-Apps. In CSS nicht gültig.

HWB

Farbton plus der Anteil an Weiß und Schwarz, der beigemischt wird. Seit Color Level 4 gültiges CSS und intuitiv für Pastell- oder gedämpfte Varianten.

CMYK

Prozentanteile der Druckfarben Cyan, Magenta, Gelb und Key (Schwarz). Die Werte hier verwenden die übliche Geräteformel; die echte Druckfarbe hängt vom Papier und vom Farbprofil der Druckerei ab.

OKLCH

Helligkeit, Chroma und Farbton in einem wahrnehmungsgleichen Farbraum. Gleiche Helligkeit wirkt bei allen Farbtönen gleich hell, was OKLCH zur besten Wahl für Farbskalen und barrierefreie Paletten macht. In allen aktuellen Browsern unterstützt.

CSS-Namen

Die 148 Schlüsselwörter wie tomato, rebeccapurple und slategray. Der Konverter zeigt den nächstliegenden an und markiert ihn, wenn er exakt passt.

HEX in RGB von Hand umrechnen

Eine HEX-Farbe besteht aus drei Paaren von Ziffern zur Basis 16. Zerlegen Sie #2a9d8f in 2a, 9d und 8f und rechnen Sie jedes Paar um: 2a ist 2 × 16 + 10 = 42, 9d ist 9 × 16 + 13 = 157 und 8f ist 8 × 16 + 15 = 143, die Farbe ist also rgb(42, 157, 143). In der Gegenrichtung teilen Sie jeden Kanal durch 16: Der Quotient ist die erste Ziffer, der Rest die zweite. Ein 8-stelliger HEX-Wert fügt ein viertes Paar für Alpha hinzu, wobei ff vollständig deckend ist und 80 etwa 50 % entspricht.

Umrechnungen zwischen HEX, RGB, HSL, HSV und HWB sind bis auf Rundung exakt. CMYK ist naturgemäß eine Annäherung, und OKLCH-Farben außerhalb des sRGB-Bereichs, den ein Bildschirm darstellen kann, werden durch Absenken des Chromas zurückgeholt, wobei Helligkeit und Farbton erhalten bleiben.

Welche Notation sollten Sie in CSS verwenden?

Jeder aktuelle Browser versteht HEX, rgb(), hsl(), hwb() und oklch(), die Wahl hängt also davon ab, was sich am besten lesen und pflegen lässt. HEX ist kompakt und das, was Designer übergeben, und bleibt daher der sichere Standard für einzelne Werte. HSL ist praktisch, wenn Sie eine Farbe von Hand leicht verschieben wollen, etwa für einen etwas helleren Hover-Zustand.

Für ein Designsystem ist OKLCH zunehmend die bessere Wahl. Weil seine Helligkeit wahrnehmungsbasiert ist, wirken Markenfarben mit demselben L-Wert tatsächlich gleich hell, und eine ganze Skala lässt sich durch Ändern einer einzigen Zahl ableiten. Außerdem kann es die kräftigeren Farben von Wide-Gamut-P3-Bildschirmen beschreiben, was HEX und rgb() nicht können. Beachten Sie, dass HSV, HSB und CMYK kein gültiges CSS sind: Sie sind hier, um Werte zwischen Design- und Druckwerkzeugen zu übertragen.

Aufhellungen, Abdunklungen, Abtönungen und Harmonien

Eine Aufhellung mischt die Farbe mit Weiß, eine Abdunklung mit Schwarz und eine Abtönung mit Grau. Die drei Reihen gehen in 10-%-Schritten von der Ausgangsfarbe aus und liefern Hover-Zustände, Rahmen und Hintergründe, die erkennbar zusammengehören.

Harmonien drehen den Farbton auf dem Farbkreis: komplementär ist der gegenüberliegende Farbton, analog sind die Nachbarn 30° auf beiden Seiten, triadisch drei Farbtöne im Abstand von 120°, split-komplementär die beiden Farbtöne neben dem Komplement und tetradisch vier Farbtöne im Abstand von 90°. Sie sind ein Ausgangspunkt für Akzente, keine Regel: Prüfen Sie Textfarben immer mit dem Kontrastprüfer. Um stattdessen eine Palette aus einem Foto zu erstellen, nutzen Sie den Farbpaletten-Generator.