Color Picker

So verwendest du die Farbauswahl

1. Öffne das native Farbfeld, um visuell aus der Farb-Benutzeroberfläche deines Betriebssystems auszuwählen, oder füge einen Wert in HEX, RGB oder HSL ein.
2. Ziehe den Transparenz-Schieberegler (0-100 %), um den Alpha-Kanal einzustellen. Ein Schachbrett-Hintergrund erscheint hinter dem Vorschaufeld, sodass du die resultierende Transparenz beurteilen kannst.
3. Lies jedes synchronisierte Ausgabeformat rechts: #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl() und hsla().
4. Klicke Kopieren neben einer Zeile, um dieses Format in deine Zwischenablage zu senden. Die passende CSS-Namensfarbe, falls vorhanden, wird ebenfalls angezeigt.

Was der Picker im Hintergrund berechnet

Der Picker akzeptiert jede CSS-Farb-Level-4-Syntax als Eingabe. Wenn du einen neuen Wert tippst oder auswählst, parst die Komponente ihn in ein kanonisches RGB-Triplet im sRGB-Farbraum, führt die in CSS-Farb-Modul Level 4 §7 beschriebene RGB-zu-HSL-Konvertierung durch (die Smith-1978-Formel: Helligkeit als Durchschnitt der maximalen und minimalen Kanäle, Sättigung und Farbton aus der Chroma abgeleitet) und generiert jedes Ausgabeformat aus dieser kanonischen Quelle. Der Alpha-Kanal wird als Gleitkommazahl zwischen 0 und 1 gehalten und an die Ausgabe angehängt, wenn er nicht 100 % ist. Die native Farbeingabe verwendet das <input type="color">-Element des Browsers, das unter der Haube den OS-Farb-Picker aufruft - macOS' NSColorPanel, Windows' Farb-Dialog oder GTKs Farbauswahl unter Linux - sodass das visuelle Auswahlerlebnis dem Rest deines Betriebssystems entspricht. Der Hex-zu-RGB-Parser akzeptiert 3-, 4-, 6- und 8-stelliges Hex mit oder ohne führendes Raute-Zeichen, und nachsichtige RGB- und HSL-Parser akzeptieren sowohl die Komma-Syntax (rgb(255, 0, 0)) als auch die neuere Leerzeichen-getrennte Syntax (rgb(255 0 0 / 0.5)), die in CSS-Farb-Modul Level 4 eingeführt wurde.

Wann der Picker seinen Platz in einem Workflow verdient

• Übersetzen einer Markenfarbe zwischen einem Figma-Design (HEX mit Alpha), einer Tailwind-Konfiguration (HSL) und einem Legacy-Stylesheet (rgba).
• Feinabstimmen einer bestimmten Transparenz für eine Toast-Benachrichtigung oder ein Overlay, bei dem ein Designer rgba(31, 41, 55, 0.65) übergeben hat und du visualisieren möchtest, wie 65 % Alpha tatsächlich aussieht.
• Finden der nächstgelegenen CSS-Namensfarbe zu einem Hex - nützlich für das Schreiben lesbarer Tutorials oder Dokumentation, bei der crimson das menschliche Scannen gegenüber #dc143c vereinfacht.
• Testen einer Farbe gegen ein Schachbrett, um zu beurteilen, ob transparente Benutzeroberflächen-Chrom vor einem variablen Hintergrund lesbar sein wird.
• Erhalten der 8-stelligen Hex (#RRGGBBAA)-Form, die Flutter, Android XML und SwiftUI alle für das Design plattformübergreifender Benutzeroberflächen akzeptieren.

Randfälle, die der Picker behandelt

Kurz-Hex (#f00) wird zu #ff0000 erweitert, und 4-stelliges Hex (#f00a) zu #ff0000aa. HSL-Helligkeit von genau 0 % oder 100 % ergibt ein farbtonnunabhängiges Ergebnis (Schwarz oder Weiß). Farbtonwerte modulo 360, sodass hsl(-30 100% 50%) zu hsl(330 100% 50%) aufgelöst wird. Ein echter Fallstrick ist, dass HSL nicht wahrnehmungsbezogen ist: Reines Gelb bei hsl(60 100% 50%) und reines Blau bei hsl(240 100% 50%) haben identische HSL-Helligkeit, sehen aber in der wahrgenommenen Helligkeit drastisch unterschiedlich aus. Für wahrnehmungsbezogene Arbeit solltest du dieses Werkzeug mit OKLCH kombinieren, das dieses Problem per Bjorn Ottosson's 2020-Oklab-Paper löst. Die CSS-Namensfarb-Übereinstimmung erfordert auch exakte Gleichheit auf allen drei Kanälen, sodass #ff0001 nicht als rot gemeldet wird.

Die CSS-Farb-Modul-Spezifikationslandschaft

CSS-Farb-Modul Level 3 (2011) kodifizierte die klassischen HEX-, RGB-, HSL-Formate und die 148 Namensfarben. Level 4 (2022 als Kandidaten-Empfehlung veröffentlicht, bis 2023 weitgehend implementiert) fügte color() für Nicht-sRGB-Farbräume, die Leerzeichen-getrennte rgb(R G B / A)-Syntax, hwb() und - am wichtigsten für modernes Design - die OKLCH- und Oklab-Funktionen aus dem Ottosson-Paper von 2020 hinzu. Level 5 fügt color-mix() und relative Farbsyntax hinzu (oklch(from var(--primary) calc(l + 0.1) c h)). Der Picker arbeitet aktuell in sRGB, weil das der Farbraum ist, den jedes Display zuverlässig rendert; OKLCH-Konvertierungen werden durch das begleitende Konverter-Werkzeug für Design-Tokens angeboten, die Wahrnehmungsuniformität benötigen. Die WCAG-2.1-Kontrastformel operiert auf sRGB-Luminanz, sodass selbst wenn du in OKLCH authorst, die RGB-Ausgabe des Pickers die Grundwahrheit für Barrierefreiheits-Berechnungen ist.

Vergleich mit Coolors, Adobe Color und DevTools

Coolors.co und Adobe Color sind in erster Linie Palette-Generatoren und Farbeditoren in zweiter - sie helfen dir, einen Satz von Farben zu finden, sind aber nicht hervorragend beim Untersuchen einer einzelnen Hex mit ihrem Alpha-Kanal und benachbarten Format-Konvertierungen. Chrome DevTools hat einen eingebauten Farb-Picker, der auftaucht, wenn du auf ein Farbfeld im Styles-Panel klickst; er ist das beste Werkzeug zum Abtasten einer Farbe von einer bestehenden Seite über die Pipetten-Funktion, gibt dir aber nicht das vollständige Seite-an-Seite-Format-Raster, das dieser Picker hat. macOS hat sein eigenes Digital Color Meter-System-Dienstprogramm zum Abtasten von Bildschirmpixeln. Verwende diesen Picker, wenn du eine Farbe aus einer Markenbeschreibung erstellst und alle Formate auf einmal benötigst; verwende DevTools, wenn du eine Farbe auf einer Live-Seite rückwärts entwickelst; verwende Digital Color Meter, wenn die Quelle eine native App oder ein Bild ist.