CSS-Farben

Das CSS-Farb-Modul definiert Farben, Farbtypen, Farbmischung, Transparenz und die Anwendung dieser Farben und Effekte auf HTML-Inhalt.

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

Farben in Aktion

Der untenstehende Farbsyntax-Konverter zeigt die Werte der aktuell ausgewählten Farbe in den CSS-Farbformaten rot-grün-blau (RGB), hexadezimal (HEX), Farbton, Sättigung und Helligkeit (HSL) und Farbton, Weiße und Schwärze (HWB) an. Alle RGB-, HEX-, HSL- und HWB-Farbwerte hier repräsentieren, obwohl unterschiedlich geschrieben, denselben Farbwert.

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

Um den Code dieses Farbsyntax-Konverters zu sehen, sehen Sie den Quellcode auf GitHub.

Referenz

Eigenschaften

At-Rules und Beschreibungen

Das CSS-Farbmodul führt auch die @color-profile At-Rule ein, zusammen mit ihren components, rendering-intent und src Beschreibungen. Derzeit unterstützen keine Browser diese Funktionen.

Funktionen

Farb-Funktionen:
- rgb()
- hsl()
- hwb()
- lab()
- lch()
- oklab()
- oklch()
- color()
color-mix()
contrast-color()
light-dark()

Das CSS-Farbmodul führt auch die device-cmyk() und contrast-color() Funktionen ein. Derzeit unterstützen keine Browser diese Funktionen.

Anwenden von Farben auf HTML-Elemente mittels CSS: Ein Leitfaden zur Verwendung von CSS, um Farbe auf verschiedene Arten von Inhalten anzuwenden, einschließlich aller CSS-Eigenschaften, die <color> als Wert akzeptieren.
CSS-Farbwerte: Ein Überblick über Farbräume und die verschiedenen <color> Funktionsnotationen, die in CSS verfügbar sind.
Farben klug verwenden: Farbtheorie und Ressourcen, einschließlich der Suche nach den richtigen Farben, um eine zugängliche Farbpalette, Kontrast und Druck in Farbe zu erstellen.
Verwendung relativer Farben: Dieser Artikel erklärt die relative CSS-Farbsyntax, zeigt, welche verschiedenen Optionen es gibt, und beleuchtet einige anschauliche Beispiele.
Farbwähler-Tool: Ein Tool, das Ihnen ermöglicht, eine Farbe im sRGB-Farbraum auszuwählen und sie zwischen verschiedenen CSS-Farbformaten zu konvertieren, damit Sie die Syntax der verschiedenen Farbnationen verstehen.
Farbe und Leuchtdichte verstehen: Farbverständnis und Verwendung von Farben für farbunempfindliche Nutzer (farbblind), Benutzer mit eingeschränktem Sehvermögen und Benutzer mit vestibulären Störungen oder anderen neurologischen Störungen.
WCAG 1.4.1: Farbkontrast: Erklärung der Kontrastanforderungen zwischen Hintergrund- und Vordergrund-Inhalten, um die Lesbarkeit zu gewährleisten.