color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die color-Eigenschaft von CSS legt den Vordergrund-Farbwert des Textes eines Elements und der Textdekorationen fest und setzt den Wert von currentColor. 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
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;
}
Eine Übersicht zur Verwendung von Farben in HTML finden Sie unter Applying color to HTML elements using 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 spezifiziert.
Beachten Sie, dass der Wert eine einheitliche Farbe sein muss. Es kann kein <gradient> sein, da dies 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 Wert der
color-Eigenschaft des Elements. WenncurrentColorjedoch als Wert voncolorgesetzt ist, wird es alsinheritbehandelt.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem sich der Text befindet, hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.
Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtkraft der Text- und Hintergrundfarben verglichen wird. 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ößeren Text wie Überschriften erforderlich. Großer Text ist definiert als 18,66px und kursiv 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
Folgendes sind alle Möglichkeiten, um 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
Loading…
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
colorAttribut color()Funktion- Applying color to HTML elements using CSS
- WCAG: Farbkontrast