Farbwähler & Konverter – HEX ⇄ RGB ⇄ HSL ⇄ CMYK + WCAG-Kontrast & Harmonien

Loading…

Über Online-Farbwähler & Konverter

Laden Sie ein Bild hoch, fügen Sie eine Farbe ein oder verwenden Sie das Rad, um pixelgenaue Farben zu erfassen. Das Tool führt eine umfassende clientseitige Analyse durch: Es normalisiert Ihr HEX, berechnet RGB/HSL/HSV/CMYK, konvertiert zu XYZ/LAB/LCH, berechnet Leuchtdichte und WCAG-Kontrast und generiert harmonische Paletten. Sie können dann jedes Format als CSS-fertiges Token kopieren oder die Harmonien nutzen, um ein kohärentes Designsystem aufzubauen.

Was dieser Farbwähler kann

Farben aus Bildern* abtasten oder mit einem präzisen Farbrad oder HEX/RGB-Eingabe beginnen
Umfangreiche Konvertierungen: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
Integrierter WCAG-Kontrastprüfer gegenüber #000000 und #FFFFFF mit relativer Leuchtdichte
Websichere und Kurzform-HEX-Vorschläge, falls zutreffend
Farbharmonien: Komplementär, triadisch, tetradisch, analog, monochrom (berechnet über Farbtonrotation)
Vorschau von Leuchtdichte und wahrgenommener Helligkeit zur Antizipation von Kontrastproblemen
Annähernde Pantone-ähnliche Zuordnung basierend auf dem nächsten RGB-Abstand (mit gecachedem Datensatz)
Analyse läuft clientseitig; nur minimale Daten werden bei aktivierter optionaler Pantone-Suche verwendet

🔧 So verwenden Sie den Farbwähler for color-picker

1. Wählen oder wählen Sie eine Basisfarbe aus

Fügen Sie einen HEX-Wert ein, geben Sie RGB/HSL ein oder verwenden Sie den Wähler, um eine Farbe aus einem Bild oder dem Rad zu entnehmen. Das Werkzeug normalisiert sie intern zu einem sicheren HEX-Wert.

2. Farbton und Helligkeit feinabstimmen

Passen Sie Farbton, Sättigung und Helligkeit an, bis die Farbe richtig aussieht. Eine große Vorschau zeigt die Farbe auf hellen und dunklen Oberflächen für den Kontext.

3. Lesen und kopieren Sie die benötigten Formate

Kopieren Sie HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB und LCH mit einem Klick. Verwenden Sie sie für CSS-Variablen, Design-Tokens oder Übergabenotizen.

4. WCAG-Kontrast prüfen

Sehen Sie Kontrastverhältnisse gegenüber #000000 und #FFFFFF basierend auf sRGB-Leuchtdichte. Nutzen Sie die Ergebnisse, um schnell zu entscheiden, ob eine Farbe für Fließtext, große Überschriften oder UI-Elemente geeignet ist.

5. Harmonien generieren & Palette erstellen

Entdecken Sie komplementäre, triadische, tetradische, analoge und monochrome Farben, die über Farbtonrotation generiert werden. Fügen Sie Ihre Favoriten zu einer Palette/Historie hinzu und exportieren Sie sie als Tokens.

Technische Details

Eingabebehandlung & Normalisierung

Das Werkzeug akzeptiert hexadezimale Farbcodes und konvertiert sie in einen normalisierten 6-stelligen HEX als interne Referenz.

Aspekt	Verhalten	Hinweise
HEX-Normalisierung	3-stellige und 6-stellige HEX, optionales führendes #	Kurze HEX (z.B. #0f8) wird zu #00ff88 erweitert; Nicht-HEX-Zeichen werden entfernt.
HEX8-Unterstützung	RGBA über #RRGGBBAA	Alphakanal wird in 0–255 umgewandelt und als 4. Byte angehängt.
Websichere Empfehlung	An nächsten 51er-Schritt pro Kanal anpassen	Werte werden auf das nächste Vielfache von 51 gerundet (0, 51, 102, 153, 204, 255).
Kurz-HEX-Empfehlung	Nur bei Komprimierbarkeit	Wird angezeigt, wenn jedes HEX-Ziffernpaar wiederholt wird (z.B. #112233 → #123).

Farbraum & Konvertierungen

Alle Berechnungen basieren auf sRGB mit einem D65-Referenzweiß.

Raum	Berechnung	Verwendung
RGB	Aus normalisierter HEX (0–255 pro Kanal)	Basisrepräsentation für Konvertierungen.
HSL / HSV	Standard-Zylindertransformationen aus sRGB	Verwendet für intuitive Bearbeitungen und Harmonieberechnungen.
CMYK	Geräteunabhängige Annäherung	Berechnet als 1−max(R,G,B) mit 0–100% Komponenten; nicht an ICC-Profile gebunden.
XYZ	Linearisiertes sRGB → XYZ mit D65-Matrix	Zwischenraum für LAB/LCH und tiefere Analysen.
LAB	CIE Lab* aus XYZ	Wahrnehmungsmäßig gleichmäßigerer metrischer Raum.
LCH	CIE LCh° aus LAB	Nützlich für Farbton/Chromatizität/Helligkeitsanpassungen und wahrnehmungsbasierte Palettengestaltung.

Leuchtdichte & WCAG-Kontrast

Kontrast wird mit der standardmäßigen WCAG-Relativleuchtdichte-Formel berechnet.

Aspekt	Details	Hinweise
Relative Leuchtdichte	Berechnet aus linearisiertem sRGB (Y-Komponente)	Verwendet Koeffizienten 0,2126R + 0,7152G + 0,0722B.
Kontrastverhältnis	(L1 + 0,05) / (L2 + 0,05)	Das Tool meldet Kontrast zu #000000 und #FFFFFF.
WCAG-Schwellenwerte	AA/AAA für normalen und großen Text	Typische Schwellenwerte: 4,5:1 (AA normal), 3:1 (AA groß), 7:1 (AAA normal), 4,5:1 (AAA groß).

Harmonien & Abgeleitete Farben

Harmonien werden als einfache Farbtonrotationen in HSL erzeugt, wobei Sättigung und Helligkeit erhalten bleiben.

Harmonie	Regel	Beispiel
Komplementär	+180° Farbton	Gegenüberliegender Punkt auf dem Farbkreis.
Triadisch	±120° Farbton	Drei gleichmäßig verteilte Farben.
Tetradisch	+90°, +180°, +270° Farbton	Vier Farben, die ein Rechteck auf dem Kreis bilden.
Analoge	−30° / +30° Farbton	Nachbarn um die Basisfarbe.
Monochrom	Aufhellen/Abdunkeln in L	Hellere und dunklere Versionen desselben Farbtons.

Pantone-ähnliche Übereinstimmung (Annäherung)

Wenn der Pantone-Datensatz verfügbar ist, berechnet das Tool eine beste Übereinstimmung im RGB-Raum.

Aspekt	Verhalten	Hinweise
Datensatzladung	Gecached + asynchrones Laden über getPantoneColors / getPantoneColorsCached	UI kann eine Übereinstimmung sofort anzeigen, wenn Cache warm ist, oder nach kurzem asynchronem Laden.
Übereinstimmungsmetrik	Quadratische euklidische Distanz auf RGB (0–255)	Schnelle, einfache Annäherung; keine wahrnehmungsbasierte ΔE*-Metrik.
Ausgabe	Pantone-ähnliche ID und Name	Nur als Orientierungshilfe angezeigt; keine offizielle Pantone-Zuordnung.

Leistung & Datenschutz

Umrechnungen, Luminanz, Kontrast und Harmonien werden vollständig clientseitig berechnet. Die Pantone-Suche kann je nach Konfiguration auf lokale oder entfernte Datensätze zugreifen, aber Rohfarben bleiben einfache HEX-Zeichenketten, es sei denn, Sie teilen oder exportieren sie explizit.

Beliebte Anwendungsfälle

UI/UX & Front-End

Erstellen Sie barrierefreie Vordergrund-/Hintergrundpaare für Schaltflächen, Links und Text.
Exportieren Sie CSS-Variablen und Design-Tokens direkt aus gewählten Farben.
Überprüfen Sie den Kontrast für Hell-/Dunkelmodi vor der Implementierung eines Themenwechslers.

/* CSS-Farb-Tokens */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding & Visuelle Identität

Leiten Sie eine Primär-/Sekundär-/Akzent-Farbpalette aus einer einzigen Hauptfarbe ab.
Erkunden Sie komplementäre oder triadische Optionen für ein Logo oder eine Produktlinie.
Erhalten Sie ungefähre Pantone-ähnliche Benennungen vor der Erstellung einer Markenrichtlinie.

Datenvisualisierung & Dashboards

Definieren Sie Serienfarben, die auf hellen und dunklen Hintergründen unterscheidbar bleiben.
Verwenden Sie LAB/LCH, um Paletten mit kontrollierten wahrnehmungsbasierten Schritten zu entwerfen.
Überprüfen Sie schnell, ob Diagrammfarben die Kontrasterwartungen in Legende und Beschriftungen erfüllen.

❓ Frequently Asked Questions

Was ist der Unterschied zwischen HEX, RGB, HSL und HSV?

HEX ist nur eine kompakte Schreibweise für RGB-Werte im Basis-16-System. RGB beschreibt die Rot-/Grün-/Blau-Komponenten in sRGB. HSL und HSV sind intuitivere zylindrische Modelle: H ist der Farbton auf dem Farbkreis, S die Sättigung und L/V steuert die Helligkeit oder Leuchtkraft.

Warum sehen CMYK-Werte ungefähr aus?

Echte CMYK-Ausgaben hängen von Druckerprofilen, Tinte, Papier und Kalibrierung ab. Dieses Tool zeigt eine geräteunabhängige Annäherung, die für frühe Designentscheidungen nützlich ist, aber finale Druckarbeiten sollten mit den ICC-Profilen Ihres Druckdienstleisters überprüft werden.

Wofür sind LAB und LCH nützlich?

LAB und LCH sind wahrnehmungsgleichmäßiger als reines RGB. Gleiche numerische Schritte in L oder C erscheinen dem Auge konsistenter, was sie ideal für das Erzeugen von Tönungen, Schattierungen und ausgewogenen Paletten oder zum Messen visueller Farbabstände macht.

Wie wird Kontrast berechnet?

Wir berechnen die relative Leuchtdichte aus sRGB mit der WCAG-Formel und leiten dann das Kontrastverhältnis (L1 + 0,05) / (L2 + 0,05) ab. Das Ergebnis wird mit gängigen Schwellwerten wie 4,5:1 (AA normaler Text) und 7:1 (AAA normaler Text) verglichen.

Sind Pantone-Namen exakt?

Nein. Jede Pantone-ähnliche Bezeichnung ist eine ungefähre Nächste-Nachbar-Übereinstimmung im RGB-Raum und dient nur als Orientierungshilfe. Für produktionskritische Arbeiten sollten Sie immer mit offiziellen Pantone-Bibliotheken und -Tools validieren.

Speichern Sie meine Bilder oder Farben?

Farbberechnungen (Formate, Kontrast, Harmonien) werden clientseitig durchgeführt. Je nach Konfiguration können Bild-Uploads und Pantone-Datensätze einen Server einbeziehen, aber das Tool ist für vorübergehende Verarbeitung, nicht für Langzeitspeicherung konzipiert. Für hochvertrauliche Assets bevorzugen Sie lokale/offline Tools.

Pro Tips

Best Practice

Vorschau von Farben immer auf hellen und dunklen Oberflächen; wahrgenommene Sättigung und Kontrast können sich im Kontext stark verändern.

Best Practice

Verwenden Sie LAB oder LCH beim Erzeugen von Tönungen und Schattierungen, damit Helligkeitsänderungen für das menschliche Auge gleichmäßiger wirken.

Best Practice

Überprüfen Sie AA/AAA-Kontraste für alle interaktiven Zustände (Hover, Aktiv, Deaktiviert), nicht nur für die Standard-Schaltflächenfarbe.

Best Practice

Exportieren Sie CSS-Variablen oder Design-Tokens aus dem Formate-Tab, um Farben in Ihren Komponenten konsistent zu halten.

Best Practice

Beim Abtasten von Bildern mitteln Sie über einen kleinen Bereich statt eines einzelnen Pixels, um Rauschen durch Komprimierung und Anti-Aliasing zu reduzieren.