Online Farbwähler

Wählen Sie eine Farbe auf dem Rad, feilen Sie sie auf der Sättigungsfläche fein und lesen Sie sie in jedem Format ab, das Ihr Projekt spricht – von #RRGGBB bis oklch(). Dieser Farbwähler beherrscht auch das, was andere Tools auslassen: drei Radgeometrien einschließlich des klassischen Maler-Farbrads RYB, Harmonie-Overlays, die Ihnen eine Palette zusammenstellen, einen Alphakanal und den Ein-Klick-Export der gesamten Palette als CSS-Variablen, SCSS oder JSON. All das wird lokal in Ihrem Browser berechnet.

RYB vs RGB: drei Räder statt eines

Der Auswahlschalter Radmodus ändert die Geometrie des Rads selbst:

• HSV und HSL sind die digitalen Räder – die Farbtöne sind so angeordnet, wie RGB-Bildschirme Licht mischen. Sie unterscheiden sich darin, wie sich die quadratische Fläche verhält: Bei HSV liegt die reinste Farbe in der hellsten Ecke, HSL platziert reine Farbtöne bei 50 % Helligkeit mit Weiß darüber.
• RYB (Maler) ordnet die Farbtöne so an, wie Künstler sie gelernt haben: Rot, Gelb und Blau als Primärfarben, mit Orange, Grün und Violett dazwischen. Sein praktischer Nutzen zeigt sich bei den Harmonien – auf dem RYB-Rad ist die Komplementärfarbe von Rot Grün und die von Blau Orange, die klassischen Pigment-Paare, während ein digitales Rad Rot mit Cyan paart. Wenn Ihnen eine „komplementäre” Palette aus einem gewöhnlichen Farbwähler schon einmal falsch vorkam, liegt das daran.

Farbharmonie-Regeln, die Ihnen die Palette zusammenstellen

Wählen Sie eine Regel unter Farbharmonie, und das Rad markiert die passenden Farben, die als fertige Palette erscheinen:

• Komplementär — eine Gegenfarbe. Der stärkste Kontrast; nutzen Sie ihn für einen einzelnen Akzent gegen eine dominante Markenfarbe.
• Split-Komplementär — die beiden Nachbarn der Komplementärfarbe. Fast so viel Kontrast, aber deutlich leichter auszubalancieren.
• Triadisch — drei gleichmäßig verteilte Farbtöne. Lebendig, aber stabil; lassen Sie einen dominieren und setzen Sie die beiden anderen sparsam ein.
• Tetradisch (Quadrat) — vier Farbtöne. Reichhaltige Schemata für Illustrationen und Datenvisualisierung; in der UI-Arbeit schwer auszubalancieren.
• Analog — die unmittelbaren Nachbarn. Geringe Spannung, gut für Hintergründe und Verläufe.
• Monochromatisch — ein Farbton in abgestuften Helligkeiten. Die sicherste Wahl für Interface-Zustände (Hover, Aktiv, Deaktiviert).

Das Palettenfeld kopiert den gesamten Satz mit einem Klick, im gewünschten Format: reines HEX, RGB, HSL, OKLCH, einfügefertige CSS-Custom-Properties (--color-1: …), SCSS-Variablen oder JSON zur Weitergabe an Code.

Umwandlung HEX, RGB, HSL, OKLCH und CMYK: alles einfügen, alles ablesen

Die Eingabefelder akzeptieren praktisch jede Farbnotation, die Sie ihnen geben: #f80, #ff8800, 8-stelliges Hex mit Alpha, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 oder CSS-Farbnamen wie rebeccapurple. Was auch immer eingegeben wird, sieben synchronisierte Ausgaben kommen zurück: HEX, RGB, HSL, HSV, LCH, OKLCH und CMYK, jede mit eigenem Kopier-Button.

Ziehen Sie den Regler Deckkraft (Alpha) unter der Vorschau, und die Ausgaben wechseln in ihre transparente Form – #RRGGBBAA, rgba(), hsla() – wobei die Vorschau über einem Schachbrettmuster angezeigt wird, damit Sie die Transparenz beurteilen können.

Finden Sie das nächstliegende Tailwind-CSS-Farb-Token

Zwei Hilfs-Chips unter der Vorschau benennen die Farbe für Sie: die nächstliegende benannte CSS-Farbe (nützlich für schnelle Prototypen und um über Farben zu sprechen) und das nächstliegende Tailwind-Token (z. B. orange-500), damit Sie in Ihrem Designsystem bleiben können, statt Einzelwerte zu erfinden. Klicken Sie auf einen der Chips, um ihn zu kopieren.

Das beantwortet die Frage, die bei jeder Design-Übergabe auftaucht: ein Designer hat mir einen Hex-Code geschickt – welche Tailwind-Klasse kommt dem am nächsten? Der Abgleich erfolgt gegen die Standardpalette von Tailwind CSS 4, sodass Sie das zurückgegebene Token direkt in einen Klassennamen einfügen können.

Welches Format sollten Sie verwenden?

Format	Vollständiger Name	Wann verwenden?
HEX	Hexadezimal	Der Web-Standard. Kompakt, universell unterstützt, leicht zu kopieren. 8 Ziffern fügen Alpha hinzu.
RGB	Rot, Grün, Blau	So denken Bildschirme. Drei Lichtkanäle, 0–255. Das Format, das die meisten APIs und Canvas-Code erwarten.
HSL	Hue, Saturation, Lightness	Für Menschen, die von Hand anpassen. „Etwas heller” oder „weniger gesättigt” ist eine einzige Zahlenänderung.
HSV	Hue, Saturation, Value	Grafiksoftware. Das Modell hinter den Farbwählern in Photoshop und GIMP.
LCH	Lightness, Chroma, Hue	Perzeptuell einheitlich. Gleiche numerische Schritte wirken wie gleiche visuelle Schritte – was HSL nur vorgibt zu sein.
OKLCH	OK Lightness, Chroma, Hue	Die moderne CSS-Wahl. Behebt die Farbtonverschiebungen von LCH bei Blautönen; von allen aktuellen Browsern unterstützt und ideal für Design-Token-Systeme.
CMYK	Cyan, Magenta, Yellow, Key	Für den Druck. Eine ungefähre Umrechnung zur Verständigung mit Druckdesignern – die endgültigen Werte stammen immer aus dem Farbprofil der Druckerei.

Kleinigkeiten, die Zeit sparen

• Der Verlauf merkt sich selbst. Die letzten 24 verwendeten Farben überstehen einen Seiten-Reload – gespeichert ausschließlich im lokalen Speicher Ihres Browsers, nie hochgeladen.
• Pipette. In Browsern mit der EyeDropper-API (Chrome und Edge) können Sie eine Farbe von einer beliebigen Stelle Ihres Bildschirms auswählen, sogar außerhalb des Browserfensters.
• Tastatursteuerung. Das Rad und die Sättigungsfläche reagieren auf Pfeiltasten für pixelgenaue Anpassungen.
• Voreinstellungen decken die gängigen Grundfarben ab, wenn Sie einfach nur einen schnellen Ausgangspunkt brauchen.

---

Häufig gestellte Fragen (FAQ)

Wie wandle ich OKLCH in HEX um?

Fügen Sie den oklch()-Wert in das OKLCH-Feld ein, und alle anderen Ausgaben aktualisieren sich sofort, HEX eingeschlossen. Es funktioniert auch umgekehrt – geben Sie einen HEX-Code ein und lesen Sie das entsprechende oklch() ab. Ein Vorbehalt: OKLCH kann Farben außerhalb des sRGB-Gamuts beschreiben, und diese werden Kanal für Kanal auf das beschnitten, was sRGB darstellen kann, sodass ein sehr chromastarkes oklch() und seine HEX-Form auf einem Wide-Gamut-Display nicht identisch aussehen.

Ist oklch() sicher für den produktiven Einsatz in CSS?

Ja. Alle aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützen oklch(), und es hat sich zur bevorzugten Notation für Design-Tokens entwickelt (Tailwind CSS 4 definiert seine gesamte Palette darin). Für sehr alte Browser fügen Sie in der Zeile davor einen HEX-Fallback ein – dieses Tool liefert Ihnen beide Werte.

Warum ändern sich die Harmonien, wenn ich zum RYB-Rad wechsle?

Weil „gegenüberliegend" davon abhängt, wie die Farbtöne rund um den Kreis angeordnet sind. Das RYB-Rad verteilt die Pigment-Primärfarben gleichmäßig, sodass komplementäre Paare auf den Kombinationen landen, die Maler erwarten – Rot–Grün, Blau–Orange, Gelb–Violett. Die Räder HSV/HSL ordnen Farbtöne nach der RGB-Lichtmischung an und paaren Rot stattdessen mit Cyan. Keines von beiden ist falsch; RYB entspricht der traditionellen Kunstausbildung, HSV/HSL dem, was Bildschirme tun.

Kann ich den CMYK-Werten für den Druck vertrauen?

Behandeln Sie sie als Orientierung, nicht als absolute Wahrheit. Die reale Druckumrechnung hängt vom ICC-Profil der Druckerei, vom Papier und von der Tinte ab – dieselbe RGB-Farbe wird auf gestrichenem und ungestrichenem Papier unterschiedlich separiert. Die Werte hier verwenden eine Standardformel, die Sie nah herankommen lässt, die endgültige Freigabe gehört aber der Druckerei.

Wo ist der Pipetten-Button in Firefox oder Safari?

Er ist dort absichtlich verborgen: Die EyeDropper-API, auf der der Button basiert, ist derzeit nur in Chromium-basierten Browsern (Chrome, Edge, Opera) implementiert. In anderen Browsern funktionieren alle übrigen Funktionen des Farbwählers normal – nur die Bildschirmauswahl steht nicht zur Verfügung.

Ist mein Farbverlauf privat?

Ja. Der Verlauf liegt im localStorage Ihres Browsers auf Ihrem Gerät. Nichts, was Sie auswählen, einfügen oder kopieren, wird übertragen – das gesamte Tool ist clientseitiges JavaScript, was Sie im Netzwerktab der Entwicklertools überprüfen können.