Farbe - CSS-Tricks

Anonim

Die colorEigenschaft in CSS legt die Farbe von Text und Textdekorationen fest.

p ( color: blue; )

Werte

Die colorEigenschaft kann jeden CSS-Farbwert akzeptieren.

  • Benannte Farben: zum Beispiel „Aqua“.
  • Hex-Farben: zum Beispiel # 00FFFF oder # 0FF.
  • RGB- und RGBa-Farben: zum Beispiel rgb (0, 255, 255) und rgba (0, 255, 255, .5).
  • HSL- und HSLa-Farben: zum Beispiel hsl (180, 100%, 50%) und hsla (180, 100%, 50%, 0,5).

Benannte Farben

p ( color: aqua; )

Benannte Farben werden auch als Keyword-Farben, X11-Farben oder SVG-Farben bezeichnet. Alle benannten Farben sind standardmäßig undurchsichtig, außer transparentdass sie vollständig transparent oder „klar“ sind. Eine Liste der benannten Farben finden Sie in unserem Snippet "Benannte Farben und Hex-Äquivalente".

Hex Farben

Hex-Farben oder hexadezimale Farben werden mit alphanumerischen Werten angegeben. Das erste Zeichenpaar repräsentiert den roten Wert, das zweite Paar repräsentiert den grünen Wert und das dritte Paar repräsentiert den blauen Wert, alle in einem Bereich von 00 bis FF.

p ( color: #00FFFF; )

Wenn die Paare der roten, blauen und grünen Werte alle doppelt sind, können Sie den Hex-Wert mit einer 3-stelligen Kurzform abkürzen. Beispiel: # 00FFFF kann mit # 0FF abgekürzt werden.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

RGB- und RGBa-Farben

RGB-Farben werden mit einer durch Kommas getrennten Liste von drei numerischen Werten (von 0 bis 255) oder Prozentwerten (von 0% bis 100%) angegeben. Der erste Wert repräsentiert den roten Wert, der zweite repräsentiert den grünen Wert und der dritte repräsentiert den blauen Wert. RGB-Farben sind standardmäßig undurchsichtig.

p ( color: rgb(0, 255, 255); )

RGBa fügt einen vierten Wert für den Alphakanal hinzu, der die Deckkraft der Farbe festlegt. Der Alpha-Wert ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1 (vollständig undurchsichtig).

p ( color: rgba(0, 255, 255, .5); )

HSL- und HSLa-Farben

HSL-Farben werden mit einer durch Kommas getrennten Liste von drei Werten angegeben: dem Farbtongrad (eine Zahl zwischen 0 und 360), einem Sättigungsprozentsatz (zwischen 0% und 100%) und einem Helligkeitsprozentsatz (zwischen 0%) bis 100%). HSL-Farben sind standardmäßig undurchsichtig.

p ( color: hsl(180, 100%, 50%); )

HSLa fügt einen vierten Wert für den Alphakanal hinzu, um die Deckkraft der Farbe zu steuern. Der Alpha-Wert ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1 (vollständig undurchsichtig).

p ( color: hsla(180, 100%, 50%, .5); )

Demo

Siehe die Stiftfarbwerte von CSS-Tricks (@ css-Tricks) auf CodePen.

Hinweise zur Verwendung

Die colorEigenschaft kaskadiert. Wenn Sie es für den Hauptteil festlegen, erben alle untergeordneten Elemente diese Farbe, es sei denn, im Stylesheet des Benutzeragenten ist eine eigene Farbe festgelegt.

Rahmen erben, colorsofern in der borderDeklaration kein Farbwert angegeben ist .

Die colorEigenschaft gilt für text-decorationLinien. In Browsern, die die text-decoration-colorEigenschaft unterstützen, können Sie verschiedene Farben für Text und seine Dekorationslinien angeben.

colorgilt auch für Listenelementmarkierungen (wie Aufzählungszeichen und Zahlen). Sie können keine separate Farbe für eine Listenelementmarkierung festlegen, aber Sie können sie durch ein Bild mit der list-styleEigenschaft ersetzen .

Obwohl benannte Farben und Hex-Farben keine Alphakanäle haben, können Sie ihre Deckkraft mit der opacityEigenschaft in allen aktuellen Browsern und IE9 + festlegen.

verbunden

  • font
  • text-decoration-color
  • opacity

Mehr Informationen

  • color in der W3C-Spezifikation
  • color bei MDN
  • CSS-Tricks Artikel Yay für HSLa

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein Irgendein Irgendein Irgendein Irgendein * Irgendein Irgendein

* HSL, HSLa und RGBa werden in IE9 + unterstützt.