CSS juridische kleurwaarden
CSS-kleuren
Kleuren in CSS kunnen op de volgende manieren worden gespecificeerd:
- Hexadecimale kleuren
- Hexadecimale kleuren met transparantie
- RGB-kleuren
- RGBA-kleuren
- HSL-kleuren
- HSLA-kleuren
- Vooraf gedefinieerde/cross-browser kleurnamen
- Met het
currentcolortrefwoord
Hexadecimale kleuren
Een hexadecimale kleur wordt gespecificeerd met: #RRGGBB, waarbij de RR (rood), GG (groen) en BB (blauw) hexadecimale gehele getallen de componenten van de kleur specificeren. Alle waarden moeten tussen 00 en FF liggen.
De waarde #0000ff wordt bijvoorbeeld weergegeven als blauw, omdat de blauwe component is ingesteld op de hoogste waarde (ff) en de andere zijn ingesteld op 00.
Voorbeeld
Definieer verschillende HEX-kleuren:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Hexadecimale kleuren met transparantie
Een hexadecimale kleur wordt opgegeven met: #RRGGBB. Om transparantie toe te voegen, voegt u twee extra cijfers toe tussen 00 en FF.
Voorbeeld
Definieer verschillende HEX-kleuren met transparantie:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB-kleuren
Een RGB-kleurwaarde wordt opgegeven met de functie rgb() , die de volgende syntaxis heeft:
rgb(red, green, blue)
Elke parameter (rood, groen en blauw) definieert de intensiteit van de kleur en kan een geheel getal zijn tussen 0 en 255 of een procentuele waarde (van 0% tot 100%).
De waarde rgb(0,0,255) wordt bijvoorbeeld weergegeven als blauw, omdat de parameter blauw is ingesteld op de hoogste waarde (255) en de andere op 0.
Ook definiëren de volgende waarden gelijke kleuren: rgb(0,0,255) en rgb(0%,0%,100%).
Voorbeeld
Definieer verschillende RGB-kleuren:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA-kleuren
RGBA-kleurwaarden zijn een uitbreiding van RGB-kleurwaarden met een alfakanaal - dat de dekking van het object specificeert.
Een RGBA-kleur wordt opgegeven met de functie rgba() , die de volgende syntaxis heeft:
rgba(red, green, blue, alpha)
De alfaparameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).
Voorbeeld
Definieer verschillende RGB-kleuren met dekking:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL-kleuren
HSL staat voor tint, verzadiging en lichtheid - en vertegenwoordigt een cilindrische coördinatenweergave van kleuren.
Een HSL-kleurwaarde wordt opgegeven met de functie hsl() , die de volgende syntaxis heeft:
hsl(hue, saturation, lightness)
Tint is een graad op het kleurenwiel (van 0 tot 360) - 0 (of 360) is rood, 120 is groen, 240 is blauw. Verzadiging is een procentuele waarde; 0% betekent een grijstint en 100% is de volledige kleur. Lichtheid is ook een percentage; 0% is zwart, 100% is wit.
Voorbeeld
Definieer verschillende HSL-kleuren:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA-kleuren
HSLA-kleurwaarden zijn een uitbreiding van HSL-kleurwaarden met een alfakanaal - dat de dekking van het object specificeert.
Een HSLA-kleurwaarde wordt opgegeven met de functie hsla() , die de volgende syntaxis heeft:
hsla(hue, saturation, lightness, alpha)
De alfaparameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).
Voorbeeld
Definieer verschillende HSL-kleuren met dekking:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Vooraf gedefinieerde/cross-browser kleurnamen
140 kleurnamen zijn vooraf gedefinieerd in de HTML- en CSS-kleurspecificatie.
Bijvoorbeeld: blue, red, coral, brown, enz:
Voorbeeld
Definieer verschillende kleurnamen:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Een lijst met alle voorgedefinieerde namen is te vinden in onze Referentie voor kleurnamen .
Het trefwoord van de huidige kleur
Het currentcolorsleutelwoord verwijst naar de waarde van de kleureigenschap van een element.
Voorbeeld
De randkleur van het volgende <div>-element is blauw, omdat de tekstkleur van het <div>-element blauw is:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}