Hex-Farbwähler und -Konverter (RGB, HSL, HSV, CMYK, OKLCH)

Konvertieren Sie jede Farbe in HEX, RGB, HSL, HSV, CMYK und OKLCH, prüfen Sie den Kontrast, kopieren Sie Harmonie-Farbfelder und exportieren Sie CSS oder JSON—direkt in Ihrem Browser.

Für interaktive Funktionen ist JavaScript erforderlich. Bitte aktivieren Sie JavaScript in Ihrem Browser, um dieses Tool zu verwenden.

Farbwert

Geben Sie Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() oder einen CSS-Farbnamen ein. Ungültige Werte behalten die letzte gültige Konvertierung bei.

Nächster CSS-Name: royalblue

Deckkraft100%

Konvertierungen

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

WCAG-Kontrast

Auf weißem Hintergrund

3.68:1

Erfüllt WCAG AA (nur großer Text)

Auf schwarzem Hintergrund

5.71:1

Erfüllt WCAG AA (normaler Text)

Harmonie-Farbfelder

Harmonietyp

Anzahl Farbfelder

Tönungs-/Schattenstreifen

Tönungs-/Schattierungsschritte

Farbfelder exportieren

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

Wählen oder fügen Sie ein beliebiges Farbformat ein, konvertieren Sie in HEX, RGB, HSL, HSV, CMYK und OKLCH, prüfen Sie den WCAG-Kontrast, erzeugen Sie Harmonie-Farbfelder, kopieren Sie Werte und exportieren Sie CSS oder JSON. Kostenlos, schnell und läuft vollständig in Ihrem Browser.

So verwenden Sie diesen Farbwähler

Geben Sie ein unterstütztes Farbformat ein oder fügen Sie es ein, passen Sie die Deckkraft an oder nutzen Sie den nativen Wähler. Die Seite konvertiert sofort in HEX, RGB, HSL, HSV, CMYK und OKLCH, zeigt den WCAG-Kontrast auf Weiß und Schwarz, erzeugt Harmonie-Farbfelder und einen Tönungs-/Schattierungsstreifen und hält alles kopierbereit. Teilen Sie Ihre Einstellung per URL—der Zustand wird in der Abfragezeichenfolge gespeichert.

HEX-, RGB-, HSL-, HSV-, CMYK- und OKLCH-Referenz

Hex ist eine kompakte RGB-Kodierung. RGB beschreibt Rot-/Grün-/Blau-Kanäle. HSL drückt Farbton, Sättigung und Helligkeit aus; HSV verwendet Farbton, Sättigung und Wert (Helligkeit). CMYK modelliert Druckfarbenanteile. OKLCH ist ein wahrnehmungsgleichmäßiger CSS-Farbraum. Dieses Tool nutzt deterministische Berechnungen im Browser—ohne Uploads und ohne externe APIs.

Komplementär, analog, triadisch, split-komplementär, tetradisch und monochromatisch

Komplementär dreht den Farbton um 180°. Analog schreitet in festen Farbtonwinkeln um die Basis. Triadisch nutzt 120°-Versätze. Split-komplementär fügt zwei Farbtöne nahe dem Komplement hinzu. Tetradisch nutzt 90°-Rechteckversätze. Monochromatisch behält den Farbton und variiert die Helligkeit. Zählsteuerungen gelten für analoge und monochromatische Modi.

CSS-Variablen und JSON-Export

Der Export erzeugt :root-Eigenschaften mit stabilen Namen (z. B. --color-base, --color-analogous-1) und JSON mit baseHex, alpha, namedColor, Harmoniemodus, Kontrastverhältnissen und Farbfeldlisten für Skripte oder Design-Tokens.

WCAG-Kontrastprüfung

Das Kontrastverhältnis wird aus der relativen Luminanz gemäß WCAG 2.x berechnet. AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text; AAA erfordert 7:1. Nutzen Sie die Vorschau beim Auswählen von Text- oder UI-Farben auf hellen oder dunklen Hintergründen.

Häufig gestellte Fragen

Welche Farbformate kann ich eingeben?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() und alle standardmäßigen CSS-Farbnamen wie cornflowerblue oder rebeccapurple.

Erweitert sich #ABC auf sechs Ziffern?

Ja. Dreistelliges Hex wird pro Ziffernpaar erweitert, sodass #ABC zu #AABBCC wird.

Was passiert, wenn meine Farbe ungültig ist?

Es wird ein Inline-Fehler angezeigt. Die letzte gültige Farbe bleibt in den Konvertierungszeilen, im Wähler und in den Exporten erhalten, bis Sie erneut einen gültigen Wert eingeben.

Wie funktioniert die WCAG-Kontrastprüfung?

Sie berechnet das Kontrastverhältnis zwischen Ihrer Farbe und reinem Weiß oder Schwarz anhand der relativen Luminanz. Die Ergebnisse zeigen, ob die Farbe die AA- oder AAA-Schwellen für normalen oder großen Text erfüllt.

Wie werden Harmoniefarben berechnet?

Sie sind deterministisch: Komplementär ist eine 180°-Farbtonverschiebung; analog nutzt feste Farbtonschritte; triadisch 120°-Versätze; split-komplementär Farbtöne nahe dem Komplement; tetradisch 90°-Rechteckversätze; monochromatisch variiert die Helligkeit bei gleichem Farbton und gleicher Sättigung.

Was ist im JSON-Export enthalten?

Stabile Schlüssel: baseHex, alpha, namedColor, harmony, harmonyCount (falls zutreffend), harmonySwatches, tintShadeStrip, stripCount und Kontrastverhältnisse—geeignet für Tools oder Dokumentation.

Kann ich meine Farben teilen?

Ja. Die URL wird mit Hex, Alpha, Harmoniemodus, Anzahlen und Streifengröße aktualisiert, sodass Sie eine exakte Einstellung speichern oder teilen können.