Farbrad-Explorer
Grundfarbe auswählen
Ziehen Sie einen Pin um das Farbrad und beobachten Sie, wie sich die Harmonien mitdrehen, komplementär bei 180°, triadisch in 120°-Abständen, analoge Nachbarn, split-komplementär, tetradisch. Wechseln Sie zwischen HSL (dem technischen Rad) und RYB (dem Künstler-Rad), vergleichen Sie, wo sie nicht übereinstimmen, und kopieren Sie die Kombination, die Sie als Palette festlegen.
So funktioniert der Farbrad-Explorer
-
1
Ziehen Sie den Pin um das Rad
Der Pin legt Ihre Grundfarbe fest. Sättigung und Helligkeit lassen sich mit separaten Reglern einstellen.
-
2
Wählen Sie eine Harmonie
Komplementär, analog, triadisch, split-komplementär, tetradisch, monochromatisch. Die Harmonien drehen sich mit der Basisfarbe.
-
3
Modell wechseln (HSL vs RYB)
HSL-Rad ist symmetrisch (rot gegenüber cyan, grün gegenüber magenta). RYB-Rad ist asymmetrisch (rot gegenüber grün, blau gegenüber orange, entspricht der Intuition beim Mischen von Farben).
-
4
Palette kopieren
Hex, RGB, HSL für die Basis und jede Harmoniefarbe. CSS-Variablen, Sass-Map oder einfache CSV.
HSL-Rad vs RYB-Rad
Beide Räder ordnen Farben in einem Kreis an, aber sie sind sich uneinig, welche Farben “entgegengesetzt” sind:
| Basis | HSL Komplement | RYB Komplement |
|---|---|---|
| Rot | Cyan | Grün |
| Orange | Blaugrün | Blau |
| Gelb | Blau | Lila |
| Grün | Magenta | Rot |
| Blau | Gelb | Orange |
| Lila | Gelb-Grün | Gelb |
- HSL (Farbton, Sättigung, Helligkeit): eine zylindrische Darstellung von sRGB für CSS und digitales Design. Durch Addition von 180° wird der gegenüberliegende Farbton auf diesem digitalen Rad gewählt.
- RYB (Rot, Gelb, Blau): ein traditionelles konzeptionelles Farbrad aus der Kunstausbildung. Dieser Explorer ordnet die Farbtonwinkel näherungsweise nach dieser Konvention an; das Ergebnis echter Pigmentmischungen sagt er nicht voraus.
Beide sind für unterschiedliche Ziele gültig. Verwenden Sie HSL für Bildschirmarbeit; verwenden Sie RYB, wenn Sie sich um die Intuition bei gemalten Medien kümmern.
Harmonie-Definitionen am Rad
- Komplementär: Basis + 180°. Stärkste Farbtontrennung auf dem gewählten Rad.
- Analog: Basis mit Nachbarn bei -30° und +30°. Sanft und einheitlich.
- Triadisch: Basis + 120° + 240°. Ausgewogene Lebhaftigkeit.
- Split-Komplement: Basis + 150° + 210°. Reichhaltig ohne die volle Spannung der Komplementärfarben.
- Tetradisch / Quadrat: Basis + 90° + 180° + 270°. Vier Farbtöne mit gleichmäßigen Abständen.
- Monochromatisch: derselbe Farbton, unterschiedliche Helligkeit/Sättigung.
Temperatur am Rad
- Warmer Teil: Rottöne, Orangetöne, Gelbtöne. Traditionell vorwärtsdrängend (zieht das Auge nach vorne).
- Kühler Teil: Grüntöne, Blautöne, Lilatöne. Traditionell zurückweichend.
- Neutrale: desaturierte Farben; gehören je nach Farbton zu einer der beiden Hälften.
Praktische Anwendungen
- Markenpalette erkunden: Ziehen Sie den Pin, bis Sie eine Farbe finden, die passt, und überprüfen Sie dann triadische oder tetradische Markierungen für unterstützende Akzente.
- Kunststudien: Wählen Sie eine Fotovorlage, finden Sie den dominierenden Farbton, schauen Sie sich analoge Nachbarn für monochromatische Schattierungen an.
- Illustration: Wählen Sie ein komplementäres Paar für Schatten, z.B. für einen orangefarbenen Gegenstand, malen Sie Schatten in Blau anstatt nur dunklerem Orange.
- Innenarchitektur-Mockup: Triadische Räder entsprechen klassischen Innenpaletten (blau/gelb/rot in traditionell amerikanisch; grün/orange/lila im Bohemian-Stil).
Warum das Rad nicht perfekt intuitiv ist
Die tatsächliche menschliche Farbwahrnehmung ist komplexer, als es jedes Rad vorschlägt. Das Munsell-System, LAB und OKLCH versuchen alle, wahrnehmungsgerechte Anordnungen zu schaffen, und sie bilden keinen einfachen Kreis, Chroma variiert mit der Helligkeit bei jedem Farbton. Für die Arbeit an Produktionsdesignsystemen liefern wahrnehmungsbasierte Farbräume sauberere Ergebnisse als Räder; für die konzeptionelle Farberkundung punktet das Rad jedoch nach wie vor mit Klarheit.
Häufig gestellte Fragen
HSL für digitales Design (CSS, Bildschirme, UI). RYB, wenn Sie an Farbe, Druck oder traditioneller Kunst denken und die konventionelle Harmonie-Intuition der Kunstschule wünschen.
Die Modelle ordnen Farbtöne unterschiedlich an. HSL verwendet den sRGB-Farbtonwinkel, daher liegt Cyan Rot gegenüber. Im traditionellen RYB-Schema liegt Grün Rot gegenüber. RYB ist hier eine visuelle Annäherung und keine Vorhersage für das Mischen bestimmter Farben.
Für Bildung, Skizzieren von Ideen und Kundenkommunikation, ja. Für präzise Palette-Arbeit verwenden Fachleute zunehmend wahrnehmungsbasierte Räume (LAB, OKLCH), in denen Helligkeit und Chroma unabhängig von Farbton sind.
Kopieren Sie die Palette als CSS, Sass oder CSV und speichern Sie sie in Ihrem Arbeitsbereich. Der Explorer besitzt keine Palettenbibliothek und keinen Kontospeicher. Im vierstufigen Ablauf stehen die sichtbaren Farbradeinstellungen in der URL und können im Browserverlauf verbleiben.
Verwandte Tools
Zufallsbuchstaben-Generator
Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.
Binär-zu-ASCII-Konverter
Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.
JSON-Formatierer
Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.
Zufälliger Farbgenerator
Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.
Base64 zu Hex-Konverter
Konvertieren Sie einen Base64-String in seine zugrunde liegenden Bytes, die als Hexadezimal dargestellt werden. Nützlich zum Überprüfen von Tokens, Schlüsseln, Zertifikaten und JWTs.
Binär zu Dezimal
Konvertieren Sie Binärzahlen sofort in Dezimalzahlen. Zeigt die Positionsausweitung, damit Sie sehen können, wie jedes Bit beiträgt.