Culoare - CSS-Tricks

Anonim

colorProprietatea în CSS stabileste culoarea de text și text , decoratiuni.

p ( color: blue; )

Valori

colorProprietatea poate accepta orice valoare de culoare CSS.

  • Culori denumite: de exemplu, „aqua”.
  • Culori hexagonale: de exemplu, # 00FFFF sau # 0FF.
  • Culori RGB și RGBa: de exemplu, rgb (0, 255, 255) și rgba (0, 255, 255, .5).
  • Culori HSL și HSLa: de exemplu, hsl (180, 100%, 50%) și hsla (180, 100%, 50%, .5).

Culori denumite

p ( color: aqua; )

Culorile denumite sunt, de asemenea, cunoscute sub numele de culori pentru cuvinte cheie, culori X11 sau culori SVG. Toate culorile denumite sunt opace în mod implicit transparent, cu excepția celor care sunt complet transparente sau „clare”. Consultați fragmentul nostru de culori numite și echivalenți hexagonali pentru o listă a culorilor denumite.

Culori hex

Culorile hexagonale sau culorile hexidecimale sunt specificate cu valori alfanumerice. Prima pereche de caractere reprezintă valoarea roșie, a doua pereche reprezintă valoarea verde, iar a treia pereche reprezintă valoarea albastră, toate într-un interval de la 00 la FF.

p ( color: #00FFFF; )

Dacă perechile de valori roșu, albastru și verde sunt toate duble, puteți abrevia valoarea hexagonală la stenograma cu 3 caractere - de exemplu, # 00FFFF poate fi abreviată la # 0FF.

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

Culori RGB și RGBa

Culorile RGB sunt specificate cu o listă separată prin virgule de trei valori numerice (variind de la 0 la 255) sau valori procentuale (variind de la 0% la 100%). Prima valoare reprezintă valoarea roșie, a doua reprezintă valoarea verde, iar a treia reprezintă valoarea albastră. Culorile RGB sunt opace în mod implicit.

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

RGBa adaugă o a patra valoare pentru canalul alfa, care stabilește opacitatea culorii. Valoarea alfa este un număr cuprins între 0,0 (complet transparent) și 1 (complet opac).

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

Culori HSL și HSLa

Culorile HSL sunt specificate cu o listă separată prin virgule de trei valori: gradul de nuanță (un număr variind de la 0 la 360), un procent de saturație (variind de la 0% la 100%) și un procent de lumină (variind de la 0% până la 100%). Culorile HSL sunt opace în mod implicit.

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

HSLa adaugă o a patra valoare pentru canalul alfa pentru a controla opacitatea culorii. Valoarea alfa este un număr cuprins între 0,0 (complet transparent) și 1 (complet opac).

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

Demo

Consultați valorile culorilor stiloului prin CSS-Tricks (@ css-tricks) pe CodePen.

Note de utilizare

Cele colorcascadele de proprietate. Dacă îl setați pe corp, toate elementele descendente vor moșteni acea culoare, cu excepția cazului în care au propria lor culoare setată în foaia de stil agent de utilizator.

Frontierele moștenesc colordacă nu se specifică o valoare a culorii în borderdeclarație.

colorProprietatea se aplică text-decorationliniilor. În browserele care acceptă text-decoration-colorproprietatea, puteți specifica diferite culori pentru text și liniile sale de decor.

colorse aplică și marcatorilor de articole din listă (cum ar fi punctele și numerele). Nu puteți seta o culoare separată pentru un marcator de element de listă, dar îl puteți înlocui cu o imagine cu list-styleproprietatea.

Deși culorile numite și culorile hex nu au canale alfa, puteți seta opacitatea acestora cu opacityproprietatea în toate browserele actuale și IE9 +.

Legate de

  • font
  • text-decoration-color
  • opacity

Mai multe informatii

  • color în specificația W3C
  • color la MDN
  • Articol CSS-Tricks Yay pentru HSLa

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Orice Orice Orice Orice Orice * Orice Orice

* HSL, HSLa și RGBa sunt acceptate în IE9 +.