DevToolPal
DE

Farbkonverter (HEX, RGB, HSL)

Farben zwischen HEX, RGB, HSL, HSV und CMYK umrechnen – mit Live-Vorschau und Kontrast zu Weiß und Schwarz.

Läuft lokal, wird nie hochgeladen

Optionen

Farbe

Ergebnis

Das Ergebnis erscheint hier

Was das Tool macht

Der Farbkonverter nimmt eine Farbe in jeder gängigen CSS-Notation entgegen und zeigt sie gleichzeitig in allen anderen an: HEX, RGB, HSL, HSV und CMYK. Außerdem siehst du ein Vorschaufeld, den CSS-Farbnamen bei exakter Übereinstimmung und das Kontrastverhältnis zu Weiß und Schwarz, damit du die Lesbarkeit prüfen kannst.

So funktioniert es

  1. Tippe oder füge eine Farbe in das Feld Farbe ein oder nutze den Farbwähler daneben.
  2. Alle Notationen aktualisieren sich während der Eingabe. Klicke neben der gewünschten auf Kopieren.
  3. Aktiviere Hex in Großbuchstaben, wenn dein Styleguide Hex-Werte groß schreibt.
  4. Prüfe die Kontrastzeilen, bevor du die Farbe für Text verwendest: Ein grünes Badge bedeutet, dass sie WCAG AA erfüllt.

Beispiel

#1e90ff ist die CSS-Farbe dodgerblue. Umgerechnet ergibt sie:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Ihr Kontrast auf Weiß beträgt 3,24:1 – genug für große Überschriften, aber nicht für Fließtext.

Farbmodelle in Kürze

  • HEX und RGB beschreiben, wie viel rotes, grünes und blaues Licht ein Bildschirm ausstrahlt. Browser und Designtools verwenden sie intern.
  • HSL beschreibt Farbton (den Winkel auf dem Farbkreis), Sättigung und Helligkeit. Damit lassen sich leicht hellere oder dunklere Abstufungen derselben Farbe erzeugen.
  • HSV (auch HSB genannt) nutzen die meisten Farbwähler in Designsoftware.
  • CMYK beschreibt Cyan, Magenta, Gelb und Schwarz als Druckfarben.

Farben mit Transparenz wie #1e90ff80 oder rgb(30 144 255 / 50%) werden in HEX, RGB und HSL mit Alphakanal angezeigt.

FAQ

› Wie rechne ich HEX in RGB um?

Teile die sechs Hex-Ziffern in drei Paare und lies jedes Paar als Zahl von 0 bis 255. Bei #1e90ff ist das 1e = 30, 90 = 144 und ff = 255, also rgb(30, 144, 255). Dieses Tool erledigt das für dich, während du tippst.

› Welche Formate kann ich einfügen?

Hex mit oder ohne # (3, 4, 6 oder 8 Ziffern), rgb() und rgba(), hsl() und hsla() in Komma- und Leerzeichen-Syntax, Prozentwerte, Winkeleinheiten wie deg und turn sowie alle 148 CSS-Farbnamen.

› Was bedeutet das Kontrastverhältnis?

Es ist der WCAG-2-Kontrast zwischen der Farbe und einem weißen oder schwarzen Hintergrund. Fließtext braucht für Stufe AA mindestens 4,5:1; großer Text (etwa 24px oder 19px fett) braucht 3:1.

› Warum ist CMYK nur ein Näherungswert?

Druckereien arbeiten mit Farbprofilen, die von Papier und Druckmaschine abhängen. Das hier angezeigte CMYK nutzt die geräteunabhängige Standardformel – ein guter Ausgangspunkt, aber kein Ersatz für ein Druckprofil.