CSS-Farben

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

Während 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 im Einsatz

Der untenstehende 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ße und Schwärze (HWB) CSS-Farbformaten. Alle hier dargestellten RGB-, HEX-, HSL- und HWB-Farbwerte repräsentieren, obwohl sie unterschiedlich geschrieben sind, denselben Farbwert.

Durch das Auswählen einer Farbe über den Farbwähler und einer Transparenz über den Schieberegler werden die RGB-, HEX-, HSL- und HWB-Werte aktualisiert. Wenn Sie einen neuen Farb- oder Transparenzwert wählen, werden die Hintergrundfarbe und der Schieberegler durch die CSS-Eigenschaften background-color und accent-color aktualisiert.

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

Referenz

Eigenschaften

At-Rules und Deskriptoren

Das CSS-Farben-Modul führt auch das At-rule @color-profile ein, zusammen mit seinen Deskriptoren components, rendering-intent und src. Derzeit unterstützt kein Browser diese Funktionen.

Funktionen

Farb-Funktionen:
- 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 Funktionen device-cmyk(), contrast-color() und hdr-color() ein. Derzeit unterstützt kein Browser diese Funktionen.

Farbe auf HTML-Elemente mit CSS anwenden: Ein Leitfaden zur Anwendung 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 funktionalen <color>-Notationen, die in CSS verfügbar sind.
Farben weise verwenden: Farbtheorie und Ressourcen, einschließlich der Suche nach den richtigen Farben, um eine zugängliche Farbpalette, Kontrast und Farbdruck zu erstellen.
Relative Farben verwenden: Dieser Artikel erklärt relative CSS-Farbsyntax, zeigt, was die verschiedenen Optionen sind, und betrachtet einige illustrative Beispiele.
Farbformat-Umwandler: Ein Tool, das Ihnen erlaubt, eine Farbe einzugeben oder auszuwählen und ihren entsprechenden Wert in jedem CSS-Farbformat zu kopieren.
Farbe und Leuchtdichte verstehen: Farbwahrnehmung und die Verwendung von Farben unter Berücksichtigung farbunempfindlicher (farbenblinder) Benutzer, Benutzer mit eingeschränkter Sehkraft und Benutzer mit vestibulären Störungen oder anderen neurologischen Störungen.
WCAG 1.4.1: Farbkontrast: Erklärung der Kontrastanforderungen zwischen Hintergrund und Vordergrundinhalten, um die Lesbarkeit zu gewährleisten.