CSS-Farben

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

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

Farben in Aktion

Der unten stehende Farbsyntax-Konverter zeigt die Werte der momentan ausgewählten Farbe in den CSS-Farbformaten rot-grün-blau (RGB), hexadezimal (HEX), Farbton, Sättigung und Helligkeit (HSL) und Farbton, Weißanteil und Schwarzanteil (HWB) an. Alle hier gezeigten RGB-, HEX-, HSL- und HWB-Farbwerte stellen, obwohl unterschiedlich geschrieben, den gleichen Farbwert dar.

Das Auswählen einer Farbe über den Farbwähler und eine Deckkraft über den Schieberegler aktualisiert die RGB-, HEX-, HSL- und HWB-Werte. Wenn Sie einen neuen Farb- oder Deckkraftwert auswählen, werden der Hintergrund und der Schieberegler über die CSS-Eigenschaften background-color und accent-color aktualisiert.

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

Referenz

Eigenschaften

At-Rules und Deskriptoren

Hinweis: Das CSS-Farbmodul führt die @-Regel @color-profile ein, zusammen mit den Deskriptoren components, rendering-intent und src. Diese Funktionen wurden noch in keinem Browser implementiert.

Funktionen

Hinweis: Das CSS-Farbmodul führt die Funktionen device-cmyk() und contrast-color() ein, die in keinem Browser implementiert wurden.

Datentypen

Glossarbegriffe und Schlüsselwörter

Schnittstellen

Hinweis: Das CSS-Farbmodul führt die CSSColorProfileRule-Schnittstelle ein, die in keinem Browser implementiert wurde.

Leitfäden

Anwenden von Farben auf HTML-Elemente mit CSS

Ein Leitfaden zur Verwendung von CSS, um Farben 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 weise verwenden

Farbtheorie und Ressourcen, einschließlich der richtigen Farben, um eine zugängliche Farbpalette zu erstellen, Kontrast und Farbdrücke.

Relative Farben verwenden

Dieser Artikel erklärt die relative CSS-Farbsyntax, zeigt, welche unterschiedlichen Optionen es gibt, und illustriert anhand einiger Beispiele.

Farbwähler-Tool

Ein Tool, das es Ihnen ermöglicht, eine Farbe im sRGB-Farbraum zu wählen und sie in verschiedene CSS-Farbformate umwandelt, um Ihnen das Verständnis für die Syntax der unterschiedlichen Farbnotationen zu erleichtern.

Verstehen von Farbe und Leuchtdichte

Farbempfindung und Verwendung von Farben unter Berücksichtigung von Personen mit Farbblindheit (Farbunempfindlichkeit), eingeschränkter Sehkraft und Personen mit vestibulären oder anderen neurologischen Störungen.

WCAG 1.4.1: Farbkontrast

Erklärung der Anforderungen an den Kontrast zwischen Hintergrund- und Vordergrundinhalten zur Sicherstellung der Lesbarkeit.

Verwandte Konzepte

Spezifikationen

Specification
CSS Color Module Level 4
CSS Color Module Level 5

Siehe auch