nicetool.dev logo

Farbkonverter

Geben Sie eine beliebige CSS-Farbe ein (HEX, rgb(), hsl(), oklch(), cmyk() oder einen Farbnamen).

#3B82F6
Formate
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

WCAG-Kontrast

Aa 123

Text auf Weiß

3.68:1

AAAA großAAA
Aa 123

Text auf Schwarz

5.71:1

AAAA großAAA

Abstufungen

Klicken Sie auf eine Abstufung, um sie zu verwenden.

Warum Farbformate umrechnen?

Designer und Entwickler arbeiten mit Farben in vielen Formaten: HEX in Design-Tools, rgb() und hsl() in CSS, OKLCH in modernen Design-Systemen wie Tailwind CSS v4 und CMYK für den Druck. Dieses Tool rechnet sofort zwischen allen um.

Funktionen

  • • Ausgabe in HEX, RGB, HSL, HSV, HWB, OKLCH und CMYK
  • • Nativer Farbwähler und Deckkraft-Regler
  • • WCAG-2-Kontrastverhältnis gegenüber Weiß und Schwarz
  • • Automatische Palette mit hellen und dunklen Abstufungen

Sofort & lokal

Alle Umrechnungen erfolgen in Ihrem Browser ohne Netzwerkanfragen.

Barrierefreie Farben, kein Tracking.

So verwenden Sie: Farbkonverter

  1. 1

    Geben Sie eine Farbe in einem beliebigen CSS-Format ein: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) oder einen Namen wie tomato. Alternativ nutzen Sie die Farbauswahl.

  2. 2

    Stellen Sie bei Bedarf die Deckkraft ein. Alle Formate aktualisieren sich gemeinsam, auch 8-stelliges HEX und rgba.

  3. 3

    Kopieren Sie das passende Format: HEX für die Designübergabe, rgb() oder hsl() für CSS, OKLCH für moderne Design-Tokens, CMYK als Ausgangspunkt für den Druck.

  4. 4

    Prüfen Sie den WCAG-Kontrast zu weißer und schwarzer Schrift und klicken Sie auf eine Abstufung, um hellere oder dunklere Varianten zu erkunden.

Praxisbeispiele

Übergabe von Design an Code

Das Design liefert #0EA5E9 aus Figma. In hsl() umgerechnet erzeugen Sie Hover- und Active-Zustände, indem Sie nur die Helligkeit ändern.

Barrierefreiheit prüfen

Fließtext braucht laut WCAG AA mindestens 4,5:1 Kontrast. Prüfen Sie eine Markenfarbe, bevor Sie sie als Buttonhintergrund mit weißer Schrift nutzen.

Farbskalen aufbauen

Nutzen Sie die Abstufungen als Ausgangspunkt für eine Palette von 50 bis 900 in Tailwind CSS oder Ihrem Designsystem.

Drucksachen

Rechnen Sie eine Bildschirmfarbe für die Druckerei in CMYK um. Das ist eine Näherung, die genaue Druckfarbe hängt von Papier und Druckerprofil ab.

Häufige Fragen

Unterschied zwischen RGB und HSL?+

Beide beschreiben dieselben Farben. RGB mischt rotes, grünes und blaues Licht, HSL nutzt Farbton, Sättigung und Helligkeit, was sich für Menschen leichter anpassen lässt, etwa 10 % heller.

Warum OKLCH?+

OKLCH ist wahrnehmungsgleichmäßig: Gleiche Helligkeitsschritte wirken für das Auge gleich groß, anders als bei HSL. Alle modernen Browser unterstützen es, und konsistente Farbskalen und Dark Themes werden einfacher.

Welcher Kontrast ist nötig?+

WCAG AA fordert 4,5:1 für normalen Text und 3:1 für großen Text (etwa 24 px oder 19 px fett). AAA verlangt 7:1 bzw. 4,5:1.

Ist der CMYK-Wert exakt?+

Nein. Eine Umrechnung von Bildschirm-RGB in CMYK ohne Farbprofil ist eine mathematische Näherung. Für markenkritische Drucke fordern Sie einen Proof an oder nutzen Pantone-Referenzen.