color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die color
-Eigenschaft CSS legt den Vordergrund-Farbwert des Textes eines Elements und dessen Textdekorationen fest und bestimmt den Wert von currentcolor
. currentcolor
kann als indirekter Wert für andere Eigenschaften verwendet werden und ist der Standard für andere Farbeigenschaften, wie zum Beispiel border-color
.
Probieren Sie es aus
Für einen Überblick zur Verwendung von Farben in HTML sehen Sie Anwenden von Farbe auf HTML-Elemente mit CSS.
Syntax
/* Keyword values */
color: currentcolor;
/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> values and legacy <rgba()> values*/
color: rgb(34, 12, 64);
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);
/* <hsl()> values and legacy <hsla()> values */
color: hsl(30, 100%, 50%);
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);
/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
Die color
-Eigenschaft wird als einzelner <color>
-Wert angegeben.
Achten Sie darauf, dass der Wert eine einheitliche Farbe sein muss. Es kann nicht ein <gradient>
sein, welches tatsächlich eine Art von <image>
ist.
Werte
<color>
-
Legt die Farbe der textlichen und dekorativen Teile des Elements fest.
currentcolor
-
Setzt die Farbe auf den
color
-Eigenschaftswert des Elements. Wenncurrentcolor
jedoch als Wert voncolor
gesetzt wird, wird es alsinherit
behandelt.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text steht, hoch genug ist, damit Menschen mit Sehschwächen den Inhalt der Seite lesen können.
Das Kontrastverhältnis von Farben wird bestimmt, indem man die Helligkeit der Text- und Hintergrundfarbwerte vergleicht. Um die aktuellen Richtlinien zur barrierefreien Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für größeren Text, wie Überschriften, erforderlich. Als großer Text gelten 18.66px und fett oder größer, oder 24px oder größer.
Formale Definition
Anfangswert | canvastext |
---|---|
Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Berechneter Wert | berechnete Farbe |
Animationstyp | by computed value type |
Formale Syntax
color =
<color>
Beispiele
Text rot machen
Dies sind alles Möglichkeiten, den Text eines Absatzes rot zu machen:
p {
color: red;
}
p {
color: #f00;
}
p {
color: #ff0000;
}
p {
color: rgb(255 0 0);
}
p {
color: rgb(100% 0% 0%);
}
p {
color: hsl(0 100% 50%);
}
/* 50% translucent */
p {
color: #ff000080;
}
p {
color: rgb(255 0 0 / 50%);
}
p {
color: hsl(0 100% 50% / 50%);
}
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # the-color-property |
Scalable Vector Graphics (SVG) 2 # ColorProperty |
Browser-Kompatibilität
Siehe auch
- Der
<color>
Datentyp - Andere farbbezogene Eigenschaften:
background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
,column-rule-color
, undprint-color-adjust
- SVG
color
Attribut - Anwenden von Farbe auf HTML-Elemente mit CSS
- WCAG: Farbkontrast