Color Picker Pro
Erweiterter Farbwähler mit Unterstützung mehrerer Formate
Farbformate
Farbharmonie
Color Picker Pro
Erweiterter Farbwähler mit Unterstützung mehrerer Formate
Funktionen
- Wählen Sie Farben über Farbton-, Sättigungs- und Helligkeitsregler oder fügen Sie einen HEX-, RGB- oder HSL-Wert ein, um alle Kanäle sofort zu synchronisieren
- Sechs Formate gleichzeitig: HEX, RGB, RGBA, HSL, HSLA und CMYK (druckfertig, keine Profil-Einbettung)
- WCAG 2.1-Kontrastverhältnis gegen beliebige Testtextfarbe, mit AA (4.5:1) und AAA (7:1) Pass/Fail-Badges über die W3C-Relativluminanz-Formel
- Farbharmonie-Generator erzeugt komplementäre, triadische, analoge und monochromatische Varianten aus dem aktuellen Farbton
- Kuratierte Paletten inkl. Material Design, Tailwind CSS und einer barrierefreiheits-fokussierten Hochkontrast-Sammlung
- Lokaler Farbverlauf mit bis zu 20 letzten Picks in localStorage (auf Wunsch gelöscht, nie synchronisiert)
- Alpha-Kanal-Unterstützung für RGBA- und HSLA-Ausgaben, bereit für CSS Custom Properties
- Zufällige Beispielfarben und Ein-Klick-Kopieren für jede einzelne Format-Zeichenkette
Anleitung
- Ziehen Sie die Farbton-, Sättigungs- und Helligkeitsregler oder fügen Sie einen bekannten HEX-Wert ein, um den Picker von einem bestimmten Punkt aus zu steuern.
- Alpha-Regler anpassen, wenn Sie Transparenz für Overlay, Glaseffekt oder Design-Token brauchen.
- Formate-Panel öffnen, um HEX, RGB(A), HSL(A) und CMYK nebeneinander zu sehen, und das von Ihrem Stack erwartete kopieren.
- Barrierefreiheits-Panel öffnen und Testtextfarbe setzen, um zu prüfen, ob das WCAG-Kontrastverhältnis AA oder AAA erfüllt.
- Farbharmonie öffnen für komplementäre, triadische oder analoge Begleiter zum Aufbau einer ausgewogenen Palette.
- Picks zur Historie hinzufügen während Sie experimentieren; auf jeden Swatch klicken, um ihn später wieder aufzurufen.
Tipps & Best Practices
- Vorschau-Änderungen in Echtzeit beim Anpassen der Einstellungen.
- Generierten Code direkt in Ihr CSS-Stylesheet kopieren.
- Designs in Hell- und Dunkelmodus für Barrierefreiheit testen.
- Browser-Entwicklertools neben diesem Tool für Live-Tests nutzen.
- Lieblings-Konfigurationen für späteren schnellen Zugriff speichern.
FAQ
Warum zeigt derselbe HEX in anderen Tools unterschiedliche RGB-Werte?
Farbwerte können in sRGB oder Display-P3 angegeben werden, und Browser rendern sie je nach Monitorkalibrierung und ICC-Profilen unterschiedlich. Dieser Picker nutzt sRGB (CSS Color Module Level 3 Standard) und rundet auf 8-Bit-Kanäle (0–255). Für Wide-Gamut-Design-Tokens nutzen Sie ein P3-fähiges Tool und konvertieren mit color()-Notation aus CSS Color Level 4.
Wie wird das WCAG-Kontrastverhältnis berechnet?
Das Verhältnis nutzt die W3C-Relativluminanz-Formel: jeder sRGB-Kanal wird linearisiert (sRGB-zu-Linear-Gamma), gewichtet mit 0.2126R + 0.7152G + 0.0722B, dann werden hellere und dunklere Luminanzen als (L1 + 0.05) / (L2 + 0.05) kombiniert. AA besteht bei 4.5:1 für Normaltext und 3:1 für großen Text; AAA bei 7:1. Die Mathematik läuft in Ihrem Browser auf dem aktuellen Vordergrund/Hintergrund-Paar.
Wird etwas an einen Server gesendet, wenn ich eine Farbe wähle?
Nein. Farbumwandlungen, Palettensuche, Kontrastberechnung und Historie laufen alle clientseitig in JavaScript. Die einzige persistente Speicherung ist localStorage für die Historie, die auf Ihrem Gerät bleibt und es nie verlässt. Sie können das Tool offline nutzen, sobald die Seite gecacht ist.
Warum stimmt CMYK-Ausgabe nicht exakt mit meinen Pantone- oder Adobe-Werten überein?
CMYK ist geräteabhängig und benötigt ein ICC-Profil für Druckgenauigkeit. Browser-Tools können kein CMYK-Profil einbetten, daher ist die Ausgabe hier eine naive sRGB-zu-CMYK-Konversion, nur als schnelle Referenz nützlich. Für Produktionsdruck CMYK in Photoshop oder Illustrator mit Druckerprofil erzeugen, oder verifizierte Swatches von Ihrer Druckerei holen.
Wie wählt der Harmonie-Generator seine Farben?
Der Generator rotiert den aktuellen HSL-Farbton: komplementär ist +180 Grad, triadisch fügt zwei Farben bei +120 und +240 hinzu, analog fügt Nachbarn bei +30 und +330 hinzu, monochromatisch verschiebt Sättigung und Helligkeit. Das ist ein mechanischer Farbrad-Ansatz: gibt einen Startpunkt, berücksichtigt aber keine perzeptive Uniformität, die Oklch oder Lab erfordern würde.
Kann ich diese Werte direkt als CSS Custom Properties nutzen?
Ja. Die HSL-Ausgabe passt direkt in modernes CSS als `--brand: hsl(217 100% 60%)` oder mit Alpha als `hsla(217, 100%, 60%, 0.8)`. HSL wird für Design-Token meist bevorzugt, weil Helligkeitsrampen trivial werden — den dritten Wert anheben gibt sofort Hover- und Active-States ohne RGB-Neuberechnung.
Unterstützt der Picker Display-P3 oder Wide-Gamut-Ausgabe?
Aktuell nicht. Der Picker nimmt sRGB an und gibt 8-Bit-pro-Kanal HEX/RGB aus. Für P3 oder Rec.2020 nutzen Sie ein Tool, das CSS Color Level 4-Syntax wie `color(display-p3 0.4 0.5 0.9)` ausgibt. Wir fügen das vielleicht hinzu, sobald Browser-Support über alle Targets stabilisiert.
Warum ist mein gespeicherter Farbverlauf verschwunden?
Historie persistiert in localStorage gebunden an diese Domain. Browserdaten löschen, Inkognito-Modus nutzen oder Browser wechseln setzt zurück. Cap ist 20 Einträge, um Quota-Probleme zu vermeiden — ältere Picks werden verdrängt, wenn neue hinzukommen.