Farbumrechner

Wählen Sie eine Farbe oder geben Sie sie in einem beliebigen Format ein (HEX, RGB, HSL, OKLCH, einen Namen wie „tomato“ …) und erhalten Sie sofort den Wert in allen anderen Formaten, bereit zum Einfügen in Ihr CSS. Stellen Sie die Transparenz ein und prüfen Sie, ob die Farbe auf Weiß und auf Schwarz gut lesbar ist.

Farbformate

HEX (#RRGGBB) ist das gängigste Format im Web: drei Paare hexadezimaler Ziffern mit dem Anteil an Rot, Grün und Blau, von 00 bis FF. RGB drückt dasselbe dezimal aus, von 0 bis 255. HSL beschreibt eine Farbe über Farbton (0-360°), Sättigung und Helligkeit in Prozent – damit lassen sich hellere oder dunklere Varianten derselben Farbe leicht erstellen.

CMYK (Cyan, Magenta, Gelb und Schwarz) ist das Farbmodell des Drucks. Die Umrechnung aus RGB ist nur eine Näherung: Für einen exakten Druck benötigen Sie das Farbprofil der Druckerei.

Transparenz, HWB und OKLCH

Die Transparenz wird mit einem vierten Wert angegeben, dem Alphakanal: #FF880080 (8-stelliges HEX), rgba(255, 136, 0, 0.5) oder in moderner Schreibweise rgb(255 136 0 / 50%). 0 ist vollständig transparent, 1 (oder 100 %) vollständig deckend.

HWB (Farbton, Weiß- und Schwarzanteil) und OKLCH (Helligkeit, Chroma und Farbton) sind Formate aus CSS Color 4, die alle aktuellen Browser unterstützen. OKLCH ist wahrnehmungsgleichmäßig: Zwei Farben mit gleicher Helligkeit wirken gleich hell – ideal zum Erstellen von Paletten und Varianten. HSV/HSB gibt es in CSS nicht, aber Photoshop, Figma und andere Designprogramme verwenden es.

CSS definiert außerdem 148 Farbnamen (tomato, rebeccapurple, steelblue …). Hat Ihre Farbe keinen Namen, zeigen wir Ihnen den ähnlichsten CSS-Namen.

Kontrast und Barrierefreiheit

Die Barrierefreiheitsrichtlinien WCAG verlangen einen Mindestkontrast zwischen Text und Hintergrund, damit auch Menschen mit Sehschwäche den Text lesen können: 4,5:1 für normalen Text in Stufe AA und 7:1 in Stufe AAA (3:1 bzw. 4,5:1 für großen Text). Der Kontrast reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).