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 setzt den Vordergrund-Farbwert des Textes eines Elements und Textdekorationen und setzt den Wert von currentcolor. currentcolor kann als ein indirekter Wert bei anderen Eigenschaften verwendet werden und ist der Standardwert 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;
}

Für einen Überblick über die Verwendung von Farben in HTML, siehe Farbe auf HTML-Elemente anwenden mit CSS.

Syntax

css
/* 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.

Beachten Sie, dass der Wert eine einheitliche Farbe sein muss. Er kann kein <gradient> sein, welcher eigentlich ein Typ von <image> ist.

Werte

<color>

Setzt die Farbe der textuellen und dekorativen Teile des Elements.

currentcolor

Setzt die Farbe auf den color-Eigenschaftswert des Elements. Wenn jedoch als Wert von color gesetzt, wird currentcolor als inherit behandelt.

Barrierefreiheit

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text platziert ist, hoch genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können.

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit der Text- und Hintergrundfarbwerte verglichen wird. Um den aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu entsprechen, 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 wird definiert als 18.66px und fett oder größer, oder 24px oder größer.

Formale Definition

Anfangswertcanvastext
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertberechnete Farbe
Animationstypby computed value type

Formale Syntax

color = 
  <color>

Beispiele

Text rot machen

Die folgenden sind alles Wege, um den Text eines Absatzes rot zu machen:

css
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