Wählen Sie eine Farbe visuell aus, verfeinern Sie deren HEX-, RGB- oder HSL-Werte, prüfen Sie den Kontrast und kopieren Sie sofort einsatzbereites CSS in Ihrem Browser.
Geben Sie #RGB, #RGBA, #RRGGBB oder #RRGGBBAA ein. Die Bildschirmpipette wird angezeigt, wenn Ihr Browser sie unterstützt.
Die Vorschau behält die letzte gültige Farbe bei, bis dieser Wert korrigiert wird.
Grund-, Abtönungs- und Schattierungswerte wirken nun in einer realen Komponente zusammen.
Ausgewählte Farben erscheinen hier auf diesem Gerät.
Fünf sRGB-Mischungen zu Weiß und fünf zu Schwarz, mit beibehaltenem Alpha-Wert.
Der Text sollte auf dem gewählten Hintergrund gut lesbar sein.
Transparenz wird mit dem Hintergrund verrechnet, bevor das Verhältnis berechnet wird.
Die Farbe ist vollständig transparent, sodass kein Text dargestellt wird und es nichts zu messen gibt. Erhöhen Sie den Alpha-Wert, um ein echtes Kontrastergebnis zu erhalten.
Verwenden Sie diese Online-Farbauswahl, um eine Farbe visuell auszuwählen oder einen exakten HEX-, RGB- oder HSL-Wert einzugeben. Die Farbauswahl hält alle Formate synchron, bewahrt die Alpha-Transparenz und wandelt eine Auswahl in eine praktische CSS-Farbfamilie um. Sie funktioniert auch als Farbauswahl für Browser und Tastaturen, die auf britisches Englisch eingestellt sind.
Ein nützlicher CSS-Farbwähler braucht mehr als nur ein einzelnes Farbfeld. Dieses Tool mischt fünf deterministische sRGB-Aufhellungen in Richtung Weiß und fünf Abdunklungen in Richtung Schwarz, wobei der ausgewählte Alpha-Wert erhalten bleibt. Die Vorschau der angewendeten Komponente zeigt die Basisfarbe, eine Aufhellung und eine Abdunklung zusammen an, und der CSS-Export verwendet ehrliche Variablennamen von tint-1 bis shade-5. Benötigen Sie eine ganze Farbharmonie anstelle einer einzelnen Farbfamilie? Senden Sie die Farbe an den Farbpaletten-Generator.
In unterstützten Browsern öffnet die Schaltfläche „Farbe vom Bildschirm aufnehmen“ den nativen Bildschirm-Farbwähler des Browsers, sodass Sie ein sichtbares Pixel aufnehmen können. Wenn die EyeDropper-API nicht verfügbar ist, funktionieren alle manuellen Farbauswahl-Steuerelemente weiterhin. Die Farbauswahl vom Bildschirm behält Ihren aktuellen Alpha-Wert bei, anstatt ihn stillschweigend zu ersetzen.
Die Kontrastvorschau vergleicht die ausgewählte Textfarbe mit einem bearbeitbaren Hintergrund und gibt die WCAG-AA-Ergebnisse für normalen und großen Text an, nachdem die Transparenz verrechnet wurde. Betrachten Sie dies als eine gezielte Farbprüfung und nicht als eine vollständige Barrierefreiheitsprüfung; die tatsächliche Schriftgröße, das Schriftgewicht, Zustände, Farbverläufe, Symbole und umgebende Komponenten müssen weiterhin überprüft werden. Der vollständige Farbkontrast-Prüfer fügt AAA-, Nicht-Text-Schwellenwerte und barrierefreie Alternativen hinzu.
Farb-Parsing, Vorschauen, zuletzt verwendete Farben, Kontrastberechnungen und die CSS-Generierung werden lokal in diesem Browser ausgeführt. Zuletzt verwendete Farben werden nur auf diesem Gerät gespeichert, wenn lokaler Speicher verfügbar ist. Keine ausgewählte Farbe wird an Analysedienste gesendet, und ein Freigabe-Link enthält Farbwerte nur dann, wenn Sie ihn explizit erstellen.
Öffnen Sie die visuelle Farbsteuerung und wählen Sie einen Farbton aus, oder geben Sie einen HEX-, RGB- oder HSL-Wert ein. Jede gültige Auswahl aktualisiert die Vorschau, die Farbfamilie, das Kontrastergebnis und die CSS-Variablen.
Ja, wenn Ihr Browser die EyeDropper-API unterstützt. Wählen Sie „Vom Bildschirm auswählen“, wählen Sie ein sichtbares Pixel aus und das Tool wendet diesen RGB-Wert an, während Ihr bestehender Alpha-Wert beibehalten wird.
Ja. Verwenden Sie 4- oder 8-stellige HEX-, RGBA-, HSLA-Werte oder den Alpha-Regler. HEXA, RGBA, HSLA, Vorschauen, Aufhellungen, Abdunklungen, Kontrast, zuletzt verwendete Farben und CSS bleiben synchronisiert.
Aufhellungen sind gleichmäßige sRGB-Mischungen zwischen der Grundfarbe und Weiß; Abdunklungen sind gleichmäßige sRGB-Mischungen zwischen der Grundfarbe und Schwarz. Es handelt sich um deterministische Hilfsmittel, nicht um eine wahrnehmungsbasierte OKLCH-Skala.
Nein. Die Farbauswahl läuft lokal. Zuletzt verwendete Farben bleiben in diesem Browser und genaue Werte sind von der Analyse ausgenommen. Ein Freigabe-Link enthält die ausgewählten Farben nur, wenn Sie einen anfordern.
Nein. HSL beschreibt eine Farbe durch Farbton, Sättigung und Helligkeit (Lightness), während HSV/HSB Farbton, Sättigung und Wert (Value) oder Helligkeit (Brightness) verwendet. Sie teilen sich die Farbtonachse, skalieren die Sättigung aber unterschiedlich, sodass eine Umwandlung von HSL zu HSV die letzten beiden Werte ändert. Dieser Picker bearbeitet HSL, da CSS hsl() direkt unterstützt; die HEX- und RGB-Werte bleiben in beiden Fällen identisch.
Phoenix Code bietet Ihnen HTML- und CSS-Bearbeitung, projektweite Suche, Git und eine Live-Vorschau in einem vollwertigen Browser- oder Desktop-Code-Editor.