Web: Essentials

Appearance

CSS: kleur ​

Zoals units zijn er ook verschillende manieren om kleuren te definiëren in CSS.

Kleur als naam ​

Er zijn ongeveer 140 kleurnamen die je kan gebruiken, bvb:

  • pink
  • red
  • green
  • ...
css
p {
  color: red;
}

Dit is een rode paragraaf.

Handig of niet?

Om snel dingen te testen zijn deze super handig maar bij een realistisch design zal je toch snel specifiekere kleuren willen gebruiken.

HSL ​

HSL staat voor:

  • Hue (kleurtoon in graden): van 0 tot 359
  • Saturation (verzadiging): van 0% (grijs) tot 100% (zuivere kleur)
  • Lightness (helderheid): van 0% (zwart) tot 100% (wit)

Een zeer gebruiksvriendelijk formaat dat je in staat stelt om via code je kleur makkelijk aan te passen.

css
p {
  color: hsl(0, 100%, 50%);
}

Dit is een rode paragraaf.

De voorkeur

Deze notatie krijgt de voorkeur: specifiek en leesbaar!

HSLa ​

Het broertje van HSL. De Hue-Saturation-Lightness wordt hier aangevuld met een alpha waarde. De alpha waarde duidt hier de opacity (transparantie) aan. Die wordt aangeduid met een waarde van 0 tot 1.

css
p {
  color: hsla(0, 100%, 50%, .5);
}

Dit is een transparante rode paragraaf.

RGB en RGBa ​

RGB staat voor:

  • Red (rood): waarde van 0 tot 255
  • Green (groen): waarde van 0 tot 255
  • Blue (blauw): waarde van 0 tot 255

Met deze waarden meng je als het ware je kleur.

Deze kan zoals HSL ook aangevuld worden met een alpha waarde. De alpha waarde duidt hier opnieuw de opacity (transparantie) aan. Die wordt aangeduid met een waarde van 0 tot 1.

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

Dit is een transparante rode paragraaf.

HEX ​

Er zijn ook 16 miljoen kleuren via hexadecimale kleurcodes. Deze werken gelijkaardig aan rgb maar zijn:

  • moeilijk leesbaar
  • beperkter in aantal combinaties

Je noteert die met een # met daarna een hexadecimale getal met 6 karakters. Deze gaan van #000000 (zwart) tot #FFFFFF (wit). Als de 3 paar hexadecimale getallen uit 2 dezelfde getallen bestaan, dan kan de verkorte notatie gebruikt worden zoals #000 en #FFF.

css
p {
  color: #FF0000;
}

Dit is een rode paragraaf.