color CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die CSS-Eigenschaft color legt den Vordergrund-Farbwert des Texts eines Elements und seiner Textdekorationen fest und setzt den Wert currentColor. currentColor kann als indirekter Wert für andere Eigenschaften verwendet werden und ist der Standardwert für andere Farbeigenschaften wie border-color.
Eine Übersicht über die Verwendung von Farbe in HTML finden Sie unter Farbe mithilfe von CSS auf HTML-Elemente anwenden.
Probieren Sie es aus
color: rebeccapurple;
color: #00a400;
color: rgb(214 122 127);
color: hsl(30deg 82% 43%);
color: hsl(237deg 74% 33% / 61%);
color: hwb(152deg 0% 58% / 70%);
<section id="default-example">
<div class="example-container">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather.
</p>
</div>
</section>
#example-element {
font-size: 1.5em;
}
.example-container {
background-color: white;
padding: 10px;
}
Syntax
/* Keyword value */
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;
Werte
Diese Eigenschaft wird als ein einzelner Wert aus der folgenden Liste angegeben:
<color>-
Legt die Farbe der textuellen und dekorativen Teile des Elements fest.
currentColor-
Legt die Farbe auf den Wert der
color-Eigenschaft des Elements fest. WenncurrentColorjedoch als Wert voncolorfestgelegt ist, wird es alsinheritbehandelt.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Texts und dem Hintergrund, auf dem der Text platziert ist, hoch genug ist, damit Menschen mit Sehbeeinträchtigungen den Inhalt der Seite lesen können.
Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Farbwerte von Text und Hintergrund bestimmt. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist für Textinhalte ein Verhältnis von 4,5:1 und für größeren Text wie Überschriften ein Verhältnis von 3:1 erforderlich. Großer Text ist als 18,66px und fett oder größer beziehungsweise als 24px oder größer definiert.
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 färben
Im Folgenden werden verschiedene Möglichkeiten gezeigt, 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
| Spezifikation |
|---|
| CSS Color Module Level 4 # the-color-property |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |
Browser-Kompatibilität
Siehe auch
- Der Datentyp
<color> - Weitere farbbezogene Eigenschaften:
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-colorundprint-color-adjust - SVG-Attribut
color - Funktion
color() - Farbe mithilfe von CSS auf HTML-Elemente anwenden
- WCAG: Farbkontrast