Färg - CSS-tricks

Anonim

Den coloregendom i CSS sätter färg på text och text dekorationer.

p ( color: blue; )

Värden

Den coloregenskapen kan acceptera någon CSS färgvärde.

  • Namngivna färger: till exempel “aqua”.
  • Hexfärger: till exempel # 00FFFF eller # 0FF.
  • RGB- och RGBa-färger: till exempel rgb (0, 255, 255) och rgba (0, 255, 255, .5).
  • HSL- och HSLa-färger: till exempel hsl (180, 100%, 50%) och hsla (180, 100%, 50%, .5).

Namngivna färger

p ( color: aqua; )

Namngivna färger kallas också nyckelordsfärger, X11-färger eller SVG-färger. Alla namngivna färger är ogenomskinliga som standard förutom att de transparentär helt transparenta eller "klara". Se vårt Named Colors and Hex Equivalents-utdrag för en lista över de namngivna färgerna.

Hex färger

Hexfärger, eller hexidecimala färger, anges med alfanumeriska värden. Det första paret tecken representerar det röda värdet, det andra paret representerar det gröna värdet och det tredje paret representerar det blå värdet, allt inom ett område från 00 till FF.

p ( color: #00FFFF; )

Om paren med röda, blåa och gröna värden är dubbla kan du förkorta hex-värdet till stenografi med tre tecken - till exempel kan # 00FFFF förkortas till # 0FF.

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

RGB- och RGBa-färger

RGB-färger anges med en kommaseparerad lista med tre numeriska värden (från 0 till 255) eller procentvärden (från 0% till 100%). Det första värdet representerar det röda värdet, det andra representerar det gröna värdet och det tredje representerar det blå värdet. RGB-färger är ogenomskinliga som standard.

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

RGBa lägger till ett fjärde värde för alfakanalen, som anger färgens opacitet. Alfavärdet är ett tal inom ett intervall från 0,0 (helt transparent) till 1 (helt ogenomskinligt).

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

HSL- och HSLa-färger

HSL-färger anges med en kommaseparerad lista med tre värden: graden av nyans (ett tal som sträcker sig från 0 till 360), en mättnadsprocent (från 0% till 100%) och en ljushetsprocent (från 0% till 100%). HSL-färger är opaka som standard.

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

HSLa lägger till ett fjärde värde för alfakanalen för att styra färgens opacitet. Alfavärdet är ett tal inom ett intervall från 0,0 (helt transparent) till 1 (helt ogenomskinligt).

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

Demo

Se pennfärgvärdena av CSS-Tricks (@ css-tricks) på CodePen.

Användningsanmärkningar

De colorfastighets kaskader. Om du ställer in den på kroppen kommer alla efterföljande element att ärva den färgen, såvida de inte har en egen färguppsättning i användaragentformatet.

Gränser ärver om colorinte ett färgvärde anges i borderdeklarationen.

Den coloregenskapen gäller text-decorationlinjer. I webbläsare som stöder text-decoration-coloregenskapen kan du ange olika färger för text och dess dekorationslinjer.

colorgäller även markör för listobjekt (som punktpunkter och siffror). Du kan inte ange en separat färg för en listobjektmarkör, men du kan ersätta den med en bild med list-styleegenskapen.

Även om namngivna färger och hexfärger inte har alfakanaler kan du ställa in deras opacitet med opacityegenskapen i alla nuvarande webbläsare och IE9 +.

Relaterad

  • font
  • text-decoration-color
  • opacity

Mer information

  • color i W3C-specifikationen
  • color vid MDN
  • CSS-Tricks-artikel Yay för HSLa

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Några Några Några Några Alla * Några Några

* HSL, HSLa och RGBa stöds i IE9 +.