Color-Picker
Sättigungs-/Helligkeitsfläche, Farbton-Slider, Hex- oder OKLCH-Eingabe und optionale Pipette. Die Fläche ist per Pfeiltasten vollwertig bedienbar; der Swatch-Input verpackt denselben Picker in ein Popover.
Fläche, Farbton und Wert
Die Fläche steuert Sättigung (waagerecht) und Helligkeit (senkrecht), der Slider den Farbton. Pfeiltasten ändern je ein Prozent, mit Umschalttaste zehn Prozent. Der Wert wird als Hex-Wert gemeldet.
Gewählt: #e8590c
Der Kontrast bezieht sich auf weiße Flächen. Für Text auf dem Akzent wählt der Provider die Schriftfarbe automatisch.
OKLCH-Anzeige
format="oklch" zeigt den Wert als OKLCH-Notation; die Eingabe akzeptiert weiterhin Hex und OKLCH, onValueChange liefert immer Hex.
Swatch-Input
Ein Farbfeld mit Popover: Der Auslöser zeigt Farbe und Wert, die Fläche ist so hoch wie ein Input derselben Größe.
Akzent live setzen
Der Picker setzt den Provider-Akzent bei jeder Änderung. Verläufe ohne lesbaren Text werden abgelehnt; die Meldung erscheint direkt darunter.
Aktueller Akzent: #0f2340
Playground
Format und Kontrastanzeige umschalten.
Barrierefreiheit
Die Fläche ist ein Slider mit aria-valuetext (Sättigung und Helligkeit in Prozent). Pfeiltasten und Umschalttaste ersetzen das Ziehen vollständig. Voreinstellungen sind Buttons mit aria-pressed, der Swatch-Input öffnet ein Popover, das Escape schließt und den Fokus zurückgibt.
Die Pipette erscheint nur in Browsern mit EyeDropper-API; die Tastatur- und Slider-Bedienung bleibt überall verfügbar.