# Farbwähler

> Farbrad mit HSV, HSL und RYB, fertige Farbharmonien, Umwandlung zwischen HEX, RGB, HSL, OKLCH, CMYK plus nächstes Tailwind-Token. Kostenlos, ohne Installation.

URL: https://acrafto.com/de/farbwahl-online-farbrad-konverter/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://en.wikipedia.org/wiki/RYB_color_model), 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](https://acrafto.com/de/bilder-in-graustufen-umwandeln-online/).

## 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](https://tailwindcss.com/docs/colors), 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](https://bottosson.github.io/posts/oklab/) (englisch). Syntax und Browserunterstützung fasst [MDN](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value/oklch) zusammen. Wie das Druckmodell funktioniert, beschreibt die [Wikipedia zu CMYK](https://de.wikipedia.org/wiki/CMYK-Farbmodell).

## 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](https://acrafto.com/de/farbauswahl-bild-online/).
- **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](https://de.wikipedia.org/wiki/ICC-Profil) 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](https://developer.mozilla.org/de/docs/Web/API/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](https://acrafto.com/de/farbauswahl-bild-online/), 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.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))