Farben umrechnen
Füge eine Farbe in einem beliebigen CSS-Format ein und erhalte alle anderen, dazu ihren Kontrast.
HEX, rgb(), hsl(), hwb() oder einen CSS-Farbnamen einfügen oder eine Farbe wählen
Hellere und dunklere Töne
Werte
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Ein Näherungswert. Die gedruckte Farbe hängt von Tinte und Papier ab, frag deine Druckerei nach genauen Werten.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nächster CSS-Name
- royalblue
Kontrast (WCAG)
Text in dieser Farbe auf jedem Hintergrund. Normaler Text braucht 4,5:1 für AA und 7:1 für AAA; großer Text (18 pt oder 14 pt fett) braucht 3:1 und 4,5:1.
Auf Weiß
Großer Text
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
5.71:1
- AA normal bestanden
- AAA normal nicht bestanden
- AA groß bestanden
- AAA groß bestanden
Auf Schwarz
Großer Text
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
3.68:1
- AA normal nicht bestanden
- AAA normal nicht bestanden
- AA groß bestanden
- AAA groß nicht bestanden
Auf #ffffff
Großer Text
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
5.71:1
- AA normal bestanden
- AAA normal nicht bestanden
- AA groß bestanden
- AAA groß bestanden
Problem mit diesem Tool melden
So verwendest du Farbkonverter
Farbe eingeben
Füge einen HEX-Code, rgb(), hsl(), hwb() oder einen Namen wie tomato ein oder wähle eine Farbe mit dem Farbwähler.
Gewünschtes Format kopieren
Alle Formate aktualisieren sich beim Tippen. Kopiere jedes mit seiner Schaltfläche oder lege dein übliches Format für die große Kopieren-Schaltfläche fest.
Kontrast prüfen
Sieh das WCAG-Kontrastverhältnis auf Weiß, auf Schwarz und auf einem Hintergrund deiner Wahl, mit AA- und AAA-Ergebnissen für normalen und großen Text.
Warum Utils365?
Liest jede CSS-Farbe
3-, 4-, 6- und 8-stelliges HEX, rgb() und hsl() in alter Komma- oder neuer Leerzeichen-Syntax, hwb(), Prozentwerte, Farbtoneinheiten und alle 148 Farbnamen.
Auch moderne Formate
Erhalte OKLCH für Designsysteme und Wide-Gamut-CSS, HWB und HSV für Farbwähler sowie HEX mit Alpha für durchscheinende Farben.
Barrierefreiheit eingebaut
Kontrastverhältnisse folgen WCAG 2 exakt und werden nie zu einem Bestehen aufgerundet, 4,49:1 besteht also nicht als 4,5:1.
Hellere und dunklere Töne
Fünf hellere und fünf dunklere Stufen stehen unter dem Farbfeld. Klicke auf eine, um sie zur aktuellen Farbe zu machen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX und RGB?
An der Farbe selbst keiner. Beide geben Rot, Grün und Blau von 0 bis 255 an. HEX schreibt jeden Wert als zwei Hexziffern, rgb(58, 91, 217) ist also #3a5bd9. HEX ist kürzer, rgb() lässt sich leichter lesen und von Hand anpassen.
Was ist HSL?
Farbton, Sättigung und Helligkeit. Der Farbton ist die Position auf dem Farbkreis in Grad (0 ist Rot, 120 Grün, 240 Blau), die Sättigung gibt an, wie kräftig die Farbe ist, und die Helligkeit reicht von Schwarz bei 0 % bis Weiß bei 100 %. So lassen sich hellere, dunklere oder gedämpfte Varianten einer Farbe leicht schreiben.
Warum passt CMYK nicht zu meiner gedruckten Farbe?
Bildschirme mischen Licht, Drucker mischen Tinte, und das Ergebnis hängt von Tinte, Papier und Druckerprofil ab. Das angezeigte CMYK beruht auf der einfachen Standardformel. Nimm es als Ausgangspunkt und frag deine Druckerei nach genauen Werten.
Was ist ein WCAG-Kontrastverhältnis?
Ein Maß dafür, wie weit zwei Farben in der Helligkeit auseinanderliegen, von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß). WCAG AA verlangt mindestens 4,5:1 für normalen und 3:1 für großen Text, AAA verlangt 7:1 und 4,5:1.
Was ist OKLCH?
Eine neuere Art, Farben in CSS über Helligkeit, Chroma und Farbton anzugeben, die sich an der menschlichen Farbwahrnehmung orientiert. Ändert man die Helligkeit, wirkt der Farbton gleich – deshalb ist es für Designsysteme und Farbskalen beliebt.
Wie funktioniert der Farbname?
Entspricht die Farbe genau einem der 148 CSS-Farbnamen, wird dieser Name angezeigt. Andernfalls erhältst du den, der ihr optisch am nächsten kommt – praktisch, um eine Farbe in Worten zu beschreiben.