CSS-Farben

Das Modul CSS-Farben definiert Farben, Farbtypen, Farbmischung, Transparenz und wie Sie diese Farben und Effekte auf HTML-Inhalte anwenden können.

Obwohl dieses Modul nur zwei CSS-Eigenschaften hat, color und opacity, hängen über 20 CSS- und SVG-Eigenschaften, CSS-Bilder, At-Regeln und @media-Regeln von diesen beiden Eigenschaften ab.

Farben in Aktion

Der nachstehende Farbsyntax-Konverter zeigt die Werte der aktuell ausgewählten Farbe in Rot-Grün-Blau (RGB), hexadezimal (HEX), Farbton, Sättigung und Helligkeit (HSL) und Farbton, Weißanteil und Schwarzanteil (HWB) CSS-Farbformaten. Alle hier gezeigten RGB-, HEX-, HSL- und HWB-Farbwerte, obwohl unterschiedlich geschrieben, stellen denselben Farbwert dar.

Das Auswählen einer Farbe über den Farbwähler und einer Opazität über den Schieberegler aktualisiert die RGB-, HEX-, HSL- und HWB-Werte. Wenn Sie einen neuen Farb- oder Opazitätswert auswählen, aktualisiert sich die Farbe des Hintergrunds und des Schiebereglers über die CSS-Eigenschaften background-color bzw. accent-color.

Um den Code für diesen Farbsyntax-Konverter zu sehen, zeigen Sie die Quelle auf GitHub.

Referenz

Eigenschaften

At-Regeln und Deskriptoren

Das CSS-Farben-Modul führt auch die @color-profile At-Regel ein, zusammen mit den components, rendering-intent und src Deskriptoren. Derzeit unterstützen keine Browser diese Funktionen.

Funktionen

Farbfunktionen:
- rgb()
- hsl()
- hwb()
- lab()
- lch()
- oklab()
- oklch()
- color()
color-mix()
contrast-color()
light-dark()
dynamic-range-limit-mix()

Die CSS-Farbmodule führen auch die device-cmyk(), contrast-color(), und hdr-color() Funktionen ein. Derzeit unterstützen keine Browser diese Funktionen.

Anwenden von Farbe auf HTML-Elemente mit CSS: Ein Leitfaden zur Verwendung von CSS, um Farbe auf verschiedene Inhaltstypen anzuwenden, einschließlich aller CSS-Eigenschaften, die <color> als Wert akzeptieren.
CSS-Farbwerte: Ein Überblick über Farbräume und die verschiedenen <color> funktionalen Notationen, die in CSS verfügbar sind.
Verwendung von Farben mit Bedacht: Farbtheorie und -ressourcen, einschließlich der Suche nach den richtigen Farben, um eine zugängliche Farbpalette, Kontrast und Farbdruck zu erstellen.
Verwendung relativer Farben: Dieser Artikel erklärt relative CSS-Farbsyntax, zeigt die verschiedenen Optionen und gibt einige anschauliche Beispiele.
Farbformat-Konverter: Ein Tool, das es Ihnen ermöglicht, eine Farbe einzugeben oder auszuwählen und deren entsprechenden Wert in jedem CSS-Farbformat zu kopieren.
Verständnis von Farbe und Luminanz: Farbwahrnehmung und Verwendung von Farben im Zusammenhang mit farbunempfindlichen (farbenblinden) Nutzern, Nutzern mit eingeschränkter Sicht und Nutzern mit vestibulären Störungen oder anderen neurologischen Störungen.
WCAG 1.4.1: Farbkontrast: Erläuterung der Kontrastanforderungen zwischen Hintergrund- und Vordergrundinhalten, um Lesbarkeit zu gewährleisten.