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 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ßgrad und Schwarzgrad (HWB) CSS-Farbformaten. Alle hier aufgeführten RGB-, HEX-, HSL- und HWB-Farbwerte repräsentieren, obwohl sie unterschiedlich geschrieben sind, denselben Farbwert.
Das Auswählen einer Farbe über den Farbauswahl und einer Transparenz über den Schieberegler aktualisiert die RGB-, HEX-, HSL- und HWB-Werte. Wenn Sie einen neuen Farb- oder Transparenzwert wählen, werden 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 Quelltext auf GitHub an.
Referenz
Eigenschaften
At-Regeln und Deskriptoren
Hinweis:
Das CSS-Farben-Modul führt die @color-profile
At-Regel ein, zusammen mit den Deskriptoren components
, rendering-intent
und src
. Diese Funktionen wurden noch in keinem Browser implementiert.
Funktionen
- Farb-Funktionen:
color-mix()
light-dark()
Hinweis:
Das CSS-Farben-Modul führt die Funktionen device-cmyk()
und contrast-color()
ein, die noch in keinem Browser implementiert wurden.
Datentypen
Glossarbegriffe und Schlüsselwörter
Schnittstellen
Hinweis:
Das CSS-Farben-Modul führt die CSSColorProfileRule
-Schnittstelle ein, die noch in keinem Browser implementiert wurde.
Leitfäden
- Farbe auf HTML-Elemente anwenden mit CSS
-
Ein Leitfaden zur Verwendung von CSS, um Farbe auf verschiedene Inhalte 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. - Farbe weise verwenden
-
Farbtheorie und Ressourcen, einschließlich der richtigen Farbenfindung zur Erstellung einer zugänglichen Farbpalette, Kontrast und Farbdruck.
- Relative Farben verwenden
-
Dieser Artikel erklärt die relative CSS-Farbsyntax, zeigt die verschiedenen Optionen und einige illustrative Beispiele.
- Farbe und Leuchtdichte verstehen
-
Farbwahrnehmung und die Verwendung von Farben für Personen mit Farbenblindheit (farbempfindlichkeitslahme Personen), 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 sicherzustellen.
Verwandte Konzepte
- CSS-Eigenschaften, die Teil anderer Spezifikationen sind:
- SVG-Farbeigenschaften, die Teil anderer Spezifikationen sind:
- SVG
color
Attribut - Farbkreis Glossarbegriff
- Interpolation Glossarbegriff
- Die
@font-palette-values
At-Regeloverride-colors
Deskriptor - Die
@color-profile
At-Regel - Die
color-gamut
@media Funktion - Die
forced-colors
@media Funktion
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