CSS-Farben

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

Auch wenn 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 unten stehende 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ß- und Schwarzanteil (HWB) CSS-Farbformaten. Alle hier dargestellten RGB-, HEX-, HSL- und HWB-Farbwerte repräsentieren, obwohl sie unterschiedlich geschrieben sind, denselben Farbwert.

Die Auswahl 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, aktualisieren sich die Hintergrundfarbe und der Schieberegler über die CSS-Eigenschaften background-color und accent-color.

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

Referenz

Eigenschaften

At-Regeln und Deskriptoren

Das CSS-Farben-Modul führt auch die @color-profile At-Regel ein, zusammen mit deren components, rendering-intent und src Deskriptoren. 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 mit CSS: Ein Leitfaden zur Verwendung von CSS, um Farbe auf eine Vielzahl von Inhalten 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.
Farben klug verwenden: Farbtheorie und Ressourcen, einschließlich der richtigen Farbwahl, um eine zugängliche Farbpalette, Kontrast und Farbdruck zu erstellen.
Relative Farben verwenden: Dieser Artikel erklärt relative CSS-Farbsyntax, zeigt, welche verschiedenen Optionen es gibt, und betrachtet einige illustrative Beispiele.
Farbwähler-Tool: Ein Tool, das es Ihnen ermöglicht, eine Farbe im sRGB-Farbraum auszuwählen und sie zwischen verschiedenen CSS-Farbformaten zu konvertieren, um das Verständnis der Syntax der verschiedenen Farbnotationen zu erleichtern.
Verstehen von Farben und Leuchtkraft: Farbwahrnehmung und die Verwendung von Farben mit Blick auf farbenblinde Benutzer, 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 Vordergrundinhalt, um die Lesbarkeit zu gewährleisten.