Kleur - CSS-trucs

Anonim

De coloreigenschap in CSS stelt de kleur van tekst en tekstversieringen in.

p ( color: blue; )

Waarden

De coloreigenschap kan elke CSS-kleurwaarde accepteren.

  • Benoemde kleuren: bijvoorbeeld "aqua".
  • Hex-kleuren: bijvoorbeeld # 00FFFF of # 0FF.
  • RGB- en RGBa-kleuren: bijvoorbeeld rgb (0, 255, 255) en rgba (0, 255, 255, .5).
  • HSL- en HSLa-kleuren: bijvoorbeeld hsl (180, 100%, 50%) en hsla (180, 100%, 50%, .5).

Benoemde kleuren

p ( color: aqua; )

Benoemde kleuren worden ook wel trefwoordkleuren, X11-kleuren of SVG-kleuren genoemd. Alle benoemde kleuren zijn standaard ondoorzichtig, behalve transparentdat deze volledig transparant of "helder" is. Zie ons fragment met benoemde kleuren en hexadecimale equivalenten voor een lijst met de genoemde kleuren.

Hex-kleuren

Hex-kleuren, of hexidecimale kleuren, worden gespecificeerd met alfanumerieke waarden. Het eerste paar tekens vertegenwoordigt de rode waarde, het tweede paar vertegenwoordigt de groene waarde en het derde paar vertegenwoordigt de blauwe waarde, allemaal in een bereik van 00 tot FF.

p ( color: #00FFFF; )

Als de paren rode, blauwe en groene waarden allemaal verdubbeld zijn, kunt u de hexadecimale waarde afkorten tot een steno van drie tekens. # 00FFFF kan bijvoorbeeld worden afgekort tot # 0FF.

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

RGB- en RGBa-kleuren

RGB-kleuren worden gespecificeerd met een door komma's gescheiden lijst van drie numerieke waarden (variërend van 0 tot 255) of percentagewaarden (variërend van 0% tot 100%). De eerste waarde vertegenwoordigt de rode waarde, de tweede vertegenwoordigt de groene waarde en de derde vertegenwoordigt de blauwe waarde. RGB-kleuren zijn standaard ondoorzichtig.

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

RGBa voegt een vierde waarde toe voor het alfakanaal, waarmee de dekking van de kleur wordt ingesteld. De alfawaarde is een getal binnen een bereik van 0,0 (volledig transparant) tot 1 (volledig ondoorzichtig).

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

HSL en HSLa Colours

HSL-kleuren worden gespecificeerd met een door komma's gescheiden lijst van drie waarden: de mate van tint (een getal van 0 tot 360), een verzadigingspercentage (van 0% tot 100%) en een helderheidspercentage (van 0% tot 100%). HSL-kleuren zijn standaard ondoorzichtig.

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

HSLa voegt een vierde waarde toe voor het alfakanaal om de ondoorzichtigheid van de kleur te regelen. De alfawaarde is een getal binnen een bereik van 0,0 (volledig transparant) tot 1 (volledig ondoorzichtig).

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

Demo

Zie de Pen-kleurwaarden door CSS-Tricks (@ css-tricks) op CodePen.

Gebruiksopmerkingen

Het colorpand loopt als een waterval. Als je het op de body instelt, zullen alle onderliggende elementen die kleur erven, tenzij ze hun eigen kleur hebben in de user agent stylesheet.

Randen erven colortenzij een kleurwaarde is opgegeven in de borderdeclaratie.

De coloreigenschap is van toepassing op text-decorationlijnen. In browsers die de text-decoration-coloreigenschap ondersteunen , kunt u verschillende kleuren opgeven voor tekst en de decoratielijnen.

coloris ook van toepassing op markeringen voor lijstitems (zoals opsommingstekens en cijfers). U kunt geen aparte kleur instellen voor een lijstitemmarkering, maar u kunt deze vervangen door een afbeelding met de list-styleeigenschap.

Hoewel benoemde kleuren en hex-kleuren geen alfakanalen hebben, kunt u hun dekking met de opacityeigenschap in alle huidige browsers en IE9 + instellen.

Verwant

  • font
  • text-decoration-color
  • opacity

Meer informatie

  • color in de W3C-specificatie
  • color bij MDN
  • CSS-Tricks artikel Yay voor HSLa

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Ieder Ieder Ieder Ieder Ieder * Ieder Ieder

* HSL, HSLa en RGBa worden ondersteund in IE9 +.