Farbwähler

Wählen Sie eine Farbe auf dem Rad, feilen Sie sie auf der Sättigungs- und Helligkeitsfläche fein und lesen Sie sie in jedem Format ab, das Ihr Projekt braucht, von #RRGGBB bis oklch(). Dieses Tool kann auch, was andere Farbwähler auslassen: drei Radmodi einschließlich des klassischen Maler-Rads RYB, Harmonien, die selbst eine Palette zusammenstellen, einen Alphakanal und den Export der ganzen Palette mit einem Klick als CSS-Variablen, SCSS oder JSON. Alles wird in Ihrem Browser berechnet.

RYB oder RGB? Drei Farbräder statt eines

Der Schalter Radmodus ändert, wie die Farbtöne auf dem Rad angeordnet sind:

• HSV und HSL sind digitale Räder. Die Farbtöne liegen so, wie Licht sie auf dem Bildschirm mischt. Sie unterscheiden sich in der quadratischen Fläche: Bei HSV ist die hellste Ecke der reine Farbton, HSL setzt reine Farbtöne in die Mitte der Helligkeit und Weiß darüber.
• RYB (Maler) ordnet die Farbtöne so an, wie Maler sie kennen: Rot, Gelb und Blau als Primärfarben, dazwischen Orange, Grün und Violett (RYB-Farbmodell auf Wikipedia, englisch). Den Unterschied merken Sie vor allem bei den Harmonien. Auf dem RYB-Rad ist die Komplementärfarbe von Rot Grün und die von Blau Orange, die klassischen Paare aus dem Kunstunterricht. Das digitale Rad paart Rot mit Cyan. Wenn Ihnen eine „komplementäre” Palette aus einem gewöhnlichen Farbwähler noch nie ganz richtig vorkam, liegt es daran.

Farbharmonien: die Palette baut sich von selbst

Wählen Sie im Feld Farbharmonie eine Regel. Das Rad markiert die passenden Farben, darunter erscheint die fertige Palette:

• Komplementär: eine Gegenfarbe. Der stärkste Kontrast, geeignet für einen einzigen Akzent neben Ihrer Hauptmarkenfarbe.
• Split-Komplementär: die beiden Nachbarn der Gegenfarbe. Fast so viel Kontrast, aber leichter auszubalancieren.
• Triadisch: drei gleichmäßig verteilte Farbtöne. Lebendig und trotzdem stabil, wenn ein Ton dominiert und die anderen beiden sparsam eingesetzt werden.
• Tetradisch (Quadrat): vier Farbtöne. Reichhaltige Schemata für Illustrationen und Diagramme, in einer App-Oberfläche schwer auszubalancieren.
• Analog: die nächsten Nachbarn. Eine ruhige Kombination für Hintergründe und Verläufe.
• Monochromatisch: ein Farbton in mehreren Helligkeitsstufen. Die sicherste Wahl für Button-Zustände (Hover, Aktiv, Deaktiviert).

Die ganze Palette kopieren Sie mit einem Klick im gewünschten Format: reines HEX, RGB, HSL, OKLCH, einfügefertige CSS-Variablen (--color-1: …), SCSS-Variablen oder JSON für den Code. Ob die Palette auch für Menschen, die Farbtöne schwerer unterscheiden, genug Kontrast hält, prüfen Sie schnell an einem Screenshot nach der Umwandlung in Graustufen.

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

Die Eingabefelder akzeptieren fast jede Farbnotation: #f80, #ff8800, achtstelliges Hex mit Transparenz, rgb() und rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 und benannte CSS-Farben wie rebeccapurple. Was auch immer Sie eingeben, Sie erhalten sieben abgestimmte Ausgaben: HEX, RGB, HSL, HSV, LCH, OKLCH und CMYK, jede mit eigenem Kopieren-Button.

Der Regler Deckkraft (Alpha) unter der Vorschau schaltet die Ausgaben auf ihre transparenten Formen #RRGGBBAA, rgba() und hsla() um. Die Vorschau wird dabei auf einem Schachbrettmuster gezeichnet, sodass Sie die Transparenz sofort sehen.

Das nächstliegende Tailwind-CSS-Token für jede Farbe

Zwei Hilfs-Chips unter der Vorschau benennen die Farbe: die nächstliegende benannte CSS-Farbe (praktisch für schnelle Prototypen) und das nächstliegende Tailwind-Token, zum Beispiel orange-500. So bleiben Sie in Ihrem Designsystem, statt Einzelwerte zu erfinden. Ein Klick auf den Chip kopiert ihn.

Das beantwortet die Frage, die bei jeder Design-Übergabe kommt: Der Designer hat einen Hex-Code geschickt, welche Tailwind-Klasse passt am besten? Der Abgleich erfolgt gegen die Standardpalette von Tailwind CSS 4 (siehe die Tailwind-Dokumentation, englisch), sodass Sie das Token direkt in einen Klassennamen einsetzen können.

Welches Farbformat sollten Sie verwenden?

Format	Vollständiger Name	Wann verwenden
HEX	Hexadecimal	Die Standardwahl für das Web. Kurz, überall unterstützt, leicht zu kopieren. Acht Ziffern fügen Transparenz hinzu.
RGB	Red, Green, Blue	So denken Bildschirme. Drei Lichtkanäle von 0 bis 255. Das Format, das die meisten APIs und Canvas-Code erwarten.
HSL	Hue, Saturation, Lightness	Zum Anpassen nach Gefühl. „Etwas heller” oder „weniger gesättigt” heißt eine einzige Zahl ändern.
HSV	Hue, Saturation, Value	Grafikprogramme. Das Modell hinter den Farbwählern in Photoshop und GIMP.
LCH	Lightness, Chroma, Hue	Wahrnehmungsgleichmäßig. Gleiche Zahlenschritte wirken wie gleiche visuelle Schritte, was HSL nur vortäuscht.
OKLCH	OK Lightness, Chroma, Hue	Die moderne Wahl für CSS. Behebt die Farbtonverschiebungen bei Blautönen, die LCH plagen. Wird von allen aktuellen Browsern unterstützt und eignet sich für Design-Tokens.
CMYK	Cyan, Magenta, Yellow, Key	Orientierung für den Druck. Eine ungefähre Umrechnung für die Abstimmung mit der Druckerei, die endgültigen Werte bestimmt deren Farbprofil.

Warum OKLCH wahrnehmungsgleichmäßiger ist als ältere Modelle, erklärt Björn Ottosson, der Entwickler des Oklab-Raums, in seinem Originalartikel (englisch). Syntax und Browserunterstützung fasst MDN zusammen. Wie das Druckmodell funktioniert, beschreibt die Wikipedia zu CMYK.

Kleinigkeiten, die Zeit sparen

• Der Verlauf speichert sich selbst. Die letzten 24 Farben überstehen einen Seiten-Reload. Sie bleiben nur im Speicher Ihres Browsers und werden nirgendwo hochgeladen.
• Pipette. In Browsern mit EyeDropper-API (Chrome und Edge) wählen Sie eine Farbe von einer beliebigen Stelle des Bildschirms, auch außerhalb des Browserfensters. Die Farbe aus einem Foto oder einer Logo-Datei finden Sie mit der Farbpipette.
• Tastatursteuerung. Rad und Sättigungsfläche reagieren auf die Pfeiltasten, sodass Sie eine Farbe in kleinen Schritten anpassen.
• Voreinstellungen bieten gängige Grundfarben, wenn Sie nur einen schnellen Startpunkt brauchen.

Häufig gestellte Fragen

Wie wandle ich OKLCH in HEX um?

Fügen Sie einen oklch()-Wert in das OKLCH-Feld ein, und alle anderen Ausgaben, HEX eingeschlossen, aktualisieren sich sofort. Es funktioniert auch umgekehrt: Geben Sie einen HEX-Code ein und lesen Sie das passende oklch() ab. Ein Vorbehalt: OKLCH kann auch Farben außerhalb des sRGB-Bereichs beschreiben, und die werden auf das beschnitten, was sRGB darstellen kann. Ein sehr gesättigtes oklch() sieht deshalb auf einem Display mit breitem Farbraum anders aus als seine HEX-Form.

Kann ich oklch() in produktivem CSS verwenden?

Ja. Alle aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützen oklch(), und es ist zu einer beliebten Notation für Design-Tokens geworden (Tailwind CSS 4 definiert seine ganze Palette darin). Für sehr alte Browser setzen Sie eine Zeile davor einen HEX-Fallback. Dieses Tool liefert Ihnen beide Werte.

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

Weil das, was „gegenüber" liegt, davon abhängt, wie die Farbtöne auf dem Kreis verteilt sind. Das RYB-Rad verteilt die Pigment-Primärfarben gleichmäßig, sodass komplementäre Paare dem entsprechen, was Maler kennen: Rot und Grün, Blau und Orange, Gelb und Violett. Die Räder HSV und HSL verteilen Farbtöne nach der Lichtmischung und paaren deshalb Rot mit Cyan. Keines von beiden ist falsch: RYB folgt dem klassischen Kunstunterricht, HSV und HSL folgen dem, was Bildschirme tun.

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

Nehmen Sie sie als Orientierung. Die tatsächliche Umrechnung für den Druck hängt vom Farbprofil der Druckerei, vom Papier und von der Tinte ab. Dieselbe RGB-Farbe fällt auf gestrichenem Papier anders aus als auf ungestrichenem. Die Werte hier verwenden die Standardformel, die Sie nah heranbringt, den endgültigen Andruck bestimmt aber die Druckerei.

Wo ist der Pipetten-Button in Firefox oder Safari?

Er ist absichtlich versteckt. Die EyeDropper-API (MDN), auf der der Button beruht, beherrschen bisher nur Browser auf Chromium-Basis (Chrome, Edge, Opera). Alle übrigen Funktionen des Tools funktionieren überall, es fehlt nur die Farbauswahl vom Bildschirm. Wenn Sie eine Farbe aus einem Bild brauchen, nutzen Sie die Farbpipette, die in jedem Browser funktioniert.

Bleibt 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 irgendwohin gesendet. Das ganze Tool läuft als JavaScript im Browser, was Sie im Netzwerk-Tab der Entwicklertools nachprüfen können.