CSS Farben
Das CSS Farben Modul definiert Farben, Farbtypen, Farbmischung, Opazität 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 folgende 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 angegebenen RGB-, HEX-, HSL- und HWB-Farbwerte stellen unabhängig von ihrer Schreibweise denselben Farbwert dar.
Das Auswählen einer Farbe über den Farbwähler und einer Opazität über den Schieberegler aktualisiert die RGB-, HEX-, HSL- und HWB-Werte. Wenn Sie einen neuen Farb- oder Opazitätswert wählen, aktualisieren sich die Farbe des Hintergrunds und des Schiebereglers über die CSS-Eigenschaften background-color
und accent-color
, jeweils.
Um den Code für diesen Farbsyntax-Konverter zu sehen, sehen Sie sich den Quellcode auf GitHub an.
Referenz
Eigenschaften
At-Regeln und Deskriptoren
Hinweis:
Das CSS Farben Modul führt die @color-profile
At-Regel ein, zusammen mit ihren components
, rendering-intent
und src
Deskriptoren. Diese Funktionen wurden bisher in keinem Browser implementiert.
Funktionen
- Farb-Funktionen:
color-mix()
light-dark()
Hinweis:
Das CSS Farben Modul führt die device-cmyk()
und contrast-color()
Funktionen ein, die bisher in keinem Browser implementiert wurden.
Datentypen
Glossarbegriffe und Schlüsselwörter
Schnittstellen
Hinweis:
Das CSS Farben Modul führt die CSSColorProfileRule
Schnittstelle ein, die in keinem Browser implementiert wurde.
Leitfäden
- Farben mit CSS auf HTML-Elemente anwenden
-
Ein Leitfaden zur Verwendung von CSS, um Farbe auf eine Vielzahl von Inhaltstypen anzuwenden, einschließlich aller CSS-Eigenschaften, die
<color>
als Wert akzeptieren. - CSS-Farbwerte
-
Ein Überblick über Farbräume und die verschiedenen
<color>
Funktionalnotationen, 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.
- Verwendung relativer Farben
-
Dieser Artikel erklärt relative CSS-Farbsyntax, zeigt, welche Optionen es gibt, und präsentiert einige anschauliche Beispiele.
- Verständnis von Farbe und Leuchtdichte
-
Farbwahrnehmung und die Verwendung von Farben mit farbunempfindlichen (farbenblinden) Nutzern, Nutzern mit eingeschränktem Sehvermögen und solchen mit vestibulären oder anderen neurologischen Störungen im Blick.
- WCAG 1.4.1: Farbkontrast
-
Erklärung der Kontrastanforderungen zwischen Hintergrund- und Vordergrundinhalten, um die Lesbarkeit sicherzustellen.
Verwandte Konzepte
- CSS-Eigenschaften, die Teil anderer Spezifikationen sind:
- SVG Farbeigenschaften, die Teil anderer Spezifikationen sind:
- SVG
color
Attribut - Glossarbegriff Farbkreis
- Glossarbegriff Interpolation
- Die
@font-palette-values
At-Regeloverride-colors
Deskriptor - Die
@color-profile
At-Regel - Die
color-gamut
@media Feature - Die
forced-colors
@media Feature
Spezifikationen
Specification |
---|
CSS Color Module Level 4 |
CSS Color Module Level 5 |
Siehe auch
- CSS Farbanpassung Modul und die
print-color-adjust
Eigenschaft. - CSS-Bilder Modul, in dem CSS
<gradient>
Bilder definiert sind. - Die
VideoColorSpace
Schnittstelle - Das SVG
<feColorMatrix>
Element - Canvas API: Stile und Farben anwenden