Farve - CSS-tricks

Anonim

Den colorejendom i CSS sætter farven på tekst og tekst dekorationer.

p ( color: blue; )

Værdier

Den coloregenskab kan acceptere nogen CSS farveværdi.

  • Navngivne farver: for eksempel “aqua”.
  • Hexfarver: for eksempel # 00FFFF eller # 0FF.
  • RGB- og RGBa-farver: for eksempel rgb (0, 255, 255) og rgba (0, 255, 255, .5).
  • HSL og HSLa farver: for eksempel hsl (180, 100%, 50%) og hsla (180, 100%, 50%, .5).

Navngivne farver

p ( color: aqua; )

Navngivne farver er også kendt som søgeordsfarver, X11-farver eller SVG-farver. Alle navngivne farver er som standard uigennemsigtige undtagen transparent, som er helt gennemsigtige eller “klare”. Se vores Named Colors and Hex Equivalents-uddrag for en liste over de navngivne farver.

Hex farver

Hexfarver eller hexidecimale farver er specificeret med alfanumeriske værdier. Det første tegnpar repræsenterer den røde værdi, det andet par repræsenterer den grønne værdi, og det tredje par repræsenterer den blå værdi, alt i et interval fra 00 til FF.

p ( color: #00FFFF; )

Hvis parrene med røde, blå og grønne værdier alle er fordoblet, kan du forkorte hex-værdien til stenografi med 3 tegn - for eksempel kan # 00FFFF forkortes til # 0FF.

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

RGB og RGBa farver

RGB-farver specificeres med en komma-adskilt liste med tre numeriske værdier (fra 0 til 255) eller procentværdier (fra 0% til 100%). Den første værdi repræsenterer den røde værdi, den anden repræsenterer den grønne værdi, og den tredje repræsenterer den blå værdi. RGB-farver er som standard uigennemsigtige.

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

RGBa tilføjer en fjerde værdi for alfakanalen, som indstiller farveens opacitet. Alfa-værdien er et tal inden for et interval fra 0,0 (fuldstændig gennemsigtig) til 1 (fuldstændig uigennemsigtig).

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

HSL og HSLa farver

HSL-farver er specificeret med en komma-adskilt liste med tre værdier: graden af farvetone (et tal fra 0 til 360), en mætningsprocent (fra 0% til 100%) og en lysprocent (fra 0% til 100%). HSL-farver er som standard uigennemsigtige.

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

HSLa tilføjer en fjerde værdi for alfakanalen for at kontrollere farvens opacitet. Alfa-værdien er et tal inden for et interval fra 0,0 (fuldstændig gennemsigtig) til 1 (fuldstændig uigennemsigtig).

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

Demo

Se penfarveværdierne ved CSS-Tricks (@ css-tricks) på CodePen.

Brugsanvisninger

De colorejendom kaskader. Hvis du sætter det på kroppen, arver alle efterfølgende elementer den farve, medmindre de har deres eget farvesæt i brugeragent-stilarket.

Kanter arver, colormedmindre en farveværdi er angivet i bordererklæringen.

Den coloregenskab gælder text-decorationlinjer. I browsere, der understøtter text-decoration-colorejendommen, kan du angive forskellige farver til tekst og dens dekorationslinjer.

colorgælder også for listeelementmarkører (som punkttegn og tal). Du kan ikke indstille en separat farve for en markeringsliste, men du kan erstatte den med et billede med list-styleegenskaben.

Selvom navngivne farver og hex-farver ikke har alfakanaler, kan du indstille deres opacitet med opacityegenskaben i alle aktuelle browsere og IE9 +.

Relaterede

  • font
  • text-decoration-color
  • opacity

Mere information

  • color i W3C-specifikationen
  • color ved MDN
  • CSS-Tricks-artikel Yay for HSLa

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen Nogen Nogen Nogen Nogen * Nogen Nogen

* HSL, HSLa og RGBa understøttes i IE9 +.