Farbkonverter
Fügen Sie eine Farbe in einem beliebigen Format ein: HEX, RGB, HSL, CMYK, LAB, OKLCH oder einen CSS-Namen. Alle anderen Formate erscheinen gleichzeitig, bereit zum Kopieren.
Alles wird in Ihrem Browser berechnet: Es wird keine Farbe gesendet.
Über dieses Tool
Dieser Farbkonverter versteht fast jede Schreibweise einer Farbe: HEX-Codes mit 3, 4, 6 oder 8 Stellen, rgb() und rgba(), hsl() und hsla(), HSV- bzw. HSB-Werte aus Grafikprogrammen, hwb(), CMYK, lab() und lch() im CIELAB-Raum, oklab() und oklch() sowie die 148 CSS-Farbnamen wie tomato oder navy. Fügen Sie einen Wert so ein, wie er in einem Entwurf, einem Stylesheet oder einem Styleguide steht: Er wird automatisch erkannt und gleichzeitig in alle anderen Formate umgerechnet.
Jede Zeile lässt sich mit einem Klick kopieren und kann auch als Ausgangspunkt dienen: Ändern Sie den HSL- oder OKLCH-Wert, und alles andere passt sich an. Die Vorschau zeigt Transparenz, ein Regler stellt die Deckkraft ein, und der Kontrast von Text auf Weiß und auf Schwarz wird nach WCAG (AA und AAA) berechnet. Die Berechnungen folgen CSS Color 4, mit einem Hinweis, wenn eine LAB- oder OKLCH-Farbe außerhalb des Bildschirm-Farbraums liegt. Ein CSS-Block zum Einfügen enthält eine Variable, die RGB-Kanäle und einen modernen OKLCH-Wert.
- HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH
- 148 CSS-Namen mit nächstgelegenem Treffer
- Freie Eingabe in jedem Format
- Deckkraft mit HEXA, RGBA und HSLA
- Kontrast AA und AAA auf Weiß und Schwarz
- CSS-Block zum Einfügen
So funktioniert es
- Fügen Sie eine Farbe ein, tippen Sie sie oder wählen Sie sie mit dem Farbwähler.
- Lesen Sie alle Formate und die Vorschau ab und passen Sie bei Bedarf die Deckkraft an.
- Prüfen Sie den Kontrast auf Weiß und auf Schwarz.
- Kopieren Sie den gewünschten Wert oder den ganzen CSS-Block.