CSS-Farben

Das CSS-Farben-Modul definiert Farben, Farbtypen, Farbüberblendung, 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 Farbsyntax-Konverter unten zeigt die Werte der derzeit ausgewählten Farbe in Rot-Grün-Blau (RGB), hexadezimal (HEX), Farbton, Sättigung und Helligkeit (HSL) und Farbton, Weißgrad und Schwarzgrad (HWB) CSS-Farbformaten 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, wird die Farbe des Hintergrunds und des Schiebereglers über die CSS-Eigenschaften background-color und accent-color entsprechend aktualisiert.

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

Referenz

Eigenschaften

At-Regeln und Deskriptoren

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

Funktionen

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

Die CSS-Farbmodule führen auch die device-cmyk()-Funktion ein. Derzeit unterstützen keine Browser diese Funktion.

Farbe auf HTML-Elemente mit CSS anwenden: Ein Leitfaden, um mit CSS Farbe auf unterschiedliche Inhaltstypen anzuwenden, inklusive 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.
Farbe klug einsetzen: Farbtheorie und Ressourcen, einschließlich des Findens der richtigen Farben zur Erstellung einer zugänglichen Farbpalette, Kontraste und Farbdrucks.
Verwendung relativer Farben: Dieser Artikel erklärt die relative CSS-Farbsyntax, zeigt die verschiedenen Optionen auf und bietet einige anschauliche Beispiele.
Verständnis von Farbe und Leuchtdichte: Farbwahrnehmung und Verwendung von Farben mit farbblinden Nutzern, Nutzern mit eingeschränktem Sehvermögen und Nutzern mit vestibulären Störungen oder anderen neurologischen Erkrankungen im Blick.
WCAG 1.4.1: Farbkontrast: Erläuterung der Kontrastanforderungen zwischen Hintergrund- und Vordergrundinhalten zur Sicherstellung der Lesbarkeit.
CSS-Wertserialisierung: Wie CSSOM-APIs Farbe und andere Werte in standardisierte Zeichenfolgenrepräsentationen serialisieren.