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
CSS Eigenschaft legt die Vordergrund-Farbe eines Textelements und Textdekorationen fest und setzt den currentcolor
Wert. currentcolor
kann als indirekter Wert für andere Eigenschaften verwendet werden und ist der Standard für andere Farbeigenschaften, wie z.B. border-color
.
Probieren Sie es aus
Für einen Überblick über die Verwendung von Farben in HTML siehe Anwenden von Farben 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 ein einzelner <color>
Wert angegeben.
Beachten Sie, dass der Wert eine einheitliche Farbe sein muss. Es kann kein <gradient>
sein, der tatsächlich ein Typ von <image>
ist.
Werte
<color>
-
Legt die Farbe der textuellen und dekorativen Teile des Elements fest.
currentcolor
-
Setzt die Farbe auf den
color
Eigenschaftswert des Elements. Wirdcurrentcolor
jedoch als Wert voncolor
festgelegt, wird er alsinherit
behandelt.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass der Kontrast zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text platziert ist, hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.
Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der Text- und Hintergrundfarbwerte bestimmt. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text ist definiert als ab 18,66px und fett oder größer oder 24px oder größer.
Formale Definition
Initialer Wert | 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
Folgende Möglichkeiten bestehen, um den Text eines Absatzes rot zu färben:
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 |
Browser-Kompatibilität
BCD tables only load in the browser
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
- Anwenden von Farben auf HTML-Elemente mit CSS
- WCAG: Farbkontrast