Farbkonverter

Ein reines Farbset-Erkundungswerkzeug: In Echtzeit zwischen HEX, RGB und HSL umrechnen, klassische Farbharmonien entdecken und aus einer einzigen Grundfarbe kohäsive Paletten erzeugen. Alles wird live aktualisiert, während Sie eine Farbe wählen oder eingeben - und alle Ergebnisse bleiben auf Ihrem Gerät.

So verwenden Sie das Tool

Farbe wählen - auf den Farbwähler klicken oder einen Hex-Code wie #3b82f6 eingeben. Die Vorschau aktualisiert sich sofort.
Die Umrechnungen ablesen - HEX-, RGB- und HSL-Werte werden mit Kopieren-Schaltflächen nebeneinander angezeigt, sodass Sie den exakten Wert für Ihr Stylesheet oder Design-Tool übernehmen können.
Harmonien erkunden - Komplementär-, Analog-, Triaden- und Teilkomplementärfarben werden automatisch berechnet. Klicken Sie eine beliebige Harmoniefarbe an, um sie als aktive Farbe zu laden und ihre eigenen Umrechnungen, Harmonien und Palette zu sehen.
Palette erzeugen - wählen Sie 8, 12 oder 16 Farben. Die Palette wird aus Ihrer Grundfarbe mit kontrollierten Variationen von Helligkeit, Sättigung und Farbton abgeleitet; jede Farbfläche wird so unterschieden, dass sie sich von den Nachbarn abhebt. Klicken Sie eine beliebige Farbfläche an, um sie zu laden.

Farbharmonien

Die Farbtheorie beschreibt Beziehungen zwischen Farben auf dem Farbrad, die natürlich angenehm wirken. Das Tool berechnet vier davon aus Ihrem Grundfarbton:

Komplementär - die direkt gegenüberliegende Farbe (180° Farbtonverschiebung). Maximaler Farbkontrast und der schnellste Weg, etwas hervorzuheben.
Analog - die beiden Nachbarn (±30°). Harmonisch und spannungsarm, ideal für Hintergründe, Verläufe und ruhige UI-Bereiche.
Triade - drei gleichermaßen verteilte Farben (120° auseinander). Lebendig und ausgewogen, ein beliebter Ansatz für Markenpaletten und flache Illustrationen.
Teilkomplementär - die beiden Nachbarn der Komplementärfarbe (±150° und ±210°). Beinahe der gleiche Farbkontrast wie komplementär, aber mit weniger Spannung zwischen den beiden unterstützenden Farben.

Jede Harmonie behält Ihre Grundsättigung und Grundhelligkeit, sodass die Farbflächen in derselben visuellen Familie bleiben wie die Ausgangsfarbe.

Palettenerzeugung

Die Palette startet vom Grundfarbton und durchläuft eine Leiter von Helligkeitsstufen - dunklere und hellere Schritte um die Basis -, überstreicht dann Sättigungsvarianten und ergänzt schließlich leicht farbtonverschobene Akzente, damit das Set zusammenhängend statt monoton wirkt. Konstante Farben (ein Beinahe-Schwarz und ein Beinahe-Weiß) werden ergänzt, damit die Palette auch verlässliche Text- und Flächenfarben enthält. Doppelte oder visuell identische Farbflächen werden herausgefiltert, und das Ergebnis wird auf die gewählte Größe begrenzt: 8, 12 oder 16 Farben.

Damit ist das Werkzeug für konkrete Aufgaben nützlich:

Pixel-Art und Spiel Assets - eine kleine, harmonische Rampe aus Schatten und Tönungen eines einzigen Farbtons.
UI-Themes - brandblaue Grundfarbe wählen und Text-, Rahmen- und Akzentfarben aus einer konsistenten Familie ziehen.
Datenvisualisierung - kategoriale Farben erzeugen, die eine gemeinsame Basis teilen, damit Diagramme als Einheit wirken.
Illustration - Analog- und Triadenpaletten liefern Schattierungsrichtungen ohne Grau.

Klicken Sie eine erzeugte Farbfläche an, um sie als aktive Farbe zu laden; anschließend können Sie sie per RGB- oder HSL-Eingabe verfeinern oder erneut in die Harmonien speisen.

Eingabeformate

Das Werkzeug ist bewusst tolerant, wenn Farben eingegeben werden:

HEX akzeptiert #rgb, #rrggbb, mit oder ohne #-Präfix.
RGB akzeptiert rgb(r, g, b), r, g, b oder r g b mit Werten von 0–255.
HSL akzeptiert hsl(h, s%, l%) (Farbton 0–360, Sättigung und Helligkeit 0–100 %). Ein negativer Farbton wird automatisch in den gültigen Bereich umgerechnet.

Ungültige Eingaben werden einfach ignoriert - Vorschau und Umrechnungen zeigen immer die letzte gültige Farbe.

Hinweise

Alle Umrechnungen und Berechnungen sind reine Client-Mathematik. Es verlassen keine Farbdaten Ihren Browser.
Der Farbkonverter konzentriert sich auf die Farbe selbst. Um zu beurteilen, ob ein Text-/Hintergrundpaar Barrierefreiheitsstufen erfüllt, nutzen Sie den eigenen Kontrastprüfer, der sowohl WCAG-2.1-Verhältnisse als auch die wahrnehmungsbasierten APCA-Stufen (Lc) anzeigt.
Das Vorschau-Farbfeld zeigt exakt die HEX-Farbe, aus der Ihre Umrechnungen berechnet werden - was Sie sehen, ist das, was die Zahlen beschreiben.