Websites met stijl

Naslag: kleur

Voorgrondkleur

De voorgrondkleur bepaalt de kleur van de tekens. Dit gebeurt met de eigenschap color.

Vorm

color: specificatie; Hierin is specificatie een van de zes in dit hoofdstuk besproken kleurspecificaties.

Voorbeelden

color: red;

color: #ff0000;

color: rgb(255,0,0);

color: hsl(0, 100%, 50%);

color: rgba(255,0,0,1);

color: hsla(0, 100%, 50%, 1); In alle gevallen is de kleur rood.

Achtergrondkleur

De achtergrondkleur bepaalt de kleur van het vlak waarop de tekens staan, zeg maar de kleur van het papier. Dit gebeurt met de eigenschap background-color.

Vorm

background-color: specificatie; Hierin is specificatie een van de zes in dit hoofdstuk besproken kleurspecificaties.

Voorbeelden

background-color: aqua;

background-color: #00ffff;

background-color: rgb(0,255,255);

background-color: hsl(180, 100%, 50%);

background-color: rgba(255,0,0,1);

background-color: hsla(180, 100%, 50%, 1); In alle gevallen is de achtergrondkleur  lichtblauw .

Methoden om kleuren te specificeren:

1: Met een kleurnaam

140 kleuren kunnen worden opgegeven met een naam. Bij wijze van voorbeeld staan er hier 25 genoemd: figuur 1: kleurnamen white lightgrey silver grey black
red maroon brown orange yellow
green yellowgreen olive teal lime
blue navy steelblue skyblue aqua
magenta purple orchid violet pink

Voorbeeld

Opmerkingen:

• Het probleem van kleurnamen is, dat er van de 16 miljoen kleuren (kleurnuances) maar 140 een naam hebben. Verreweg de meeste kleuren hebben geen naam.
• Voor een overzicht van alle kleurnamen zie het overzicht bij W3 schools - color names.

2: RGB kleuren

Elk beeldpunt (pixel) bestaat uit een rood, een blauw en een groen lampje.

• De helderheid van de pixel wordt bepaald door de gezamenlijke helderheid van de rode, groene en blauwe lampjes.
• De kleur wordt bepaald door de verhouding van de helderheden van de rode, groene en blauwe lampjes. Als alle pixels even helder branden, is de resulterende kleur een grijstint. Als het rode lampje helder brandt en de andere twee uit zijn is de kleur zuiver rood.

RGB-kleuren worden opgegeven als rgb(rood-waarde, groen-waarde, blauw-waarde) Elk van deze kleur-waarden is een getal van 0 (donker) tot 255 (licht).

Voorbeelden
Als alle kleuren maximaal zijn: rgb(255,255,255) krijg je wit.
Als alleen het rode lampje helder brandt rgb(255,0,0) krijg je rood.

De kleuren van figuur 1 zijn hieronder weergegeven met hun rgb-waarden: figuur 2: rgb-kleuren rgb(255,255,255) rgb(211,211,211) rgb(192,192,192) rgb(128,128,128) rgb(0,0,0)
rgb(255,0,0) rgb(128,0,0) rgb(165,42,42) rgb(255,165,0) rgb(255,255,0)
rgb(0,128,0) rgb(154, 205, 50) rgb(128,128,0) rgb(0,128,128) rgb(0,255,0)
rgb(0,0,255) rgb(0,0,128) rgb(70,130,180) rgb(135,206,235) rgb(0,255,255)
rgb(255,0,255) rgb(128,0,128) rgb(218,112,214) rgb(238,130,238) rgb(255,192,203)

Voorbeeld

3. Hexadecimale kleuren

Bij hexadecimale kleuren worden de helderheden van de drie kleuren omgezet in hexadecimaal getallen van 2 cijfers. Zie de naslag hexadecimaal.

De vorm is #rrggbb Hierbij is rr de hexadecimale waarde van rood, gg de hexadecimale waarde van groen en bb de hexadecimale waarde van blauw.

Voorbeeld: Het oranje vakje in figuur 2 (tweede regel, vierde vakje van links) heeft de rgb-kleurwaarde rgb(255, 165,0).
In tabel 1 van de naslag hexadecimaal kan je aflezen welke hexadecimale getallen daarbij horen:

• rood (255) is hexadecimaal ff,
• groen (165) is hexadecimaal a5,
• en blauw (0) is hexadecimaal 00.
  (Elk hexadecimaal getal moet worden opgegeven in 2 cijfers, dus 00 en niet 0)

De kleuren van figuur 1 en 2 zijn hieronder genoteerd als hexadecimale kleuren: figuur 3: hexadecimale kleuren #ffffff #d3d3d3 #c0c0c0) #808080 #000000
#ff0000 #800000 #a52a2a #ffa500 #ffff00
#008000 #9acd32 #808000 #008080 #00ff00
#0000ff #000080 #4682b4 #87ceeb #00ffff
#ff00ff #800080 #da70d6 #ee82ee #ffc0cb

Voorbeeld

3.a: Verkorte hexadecimale notatie

Als de roodwaarde, groenwaarde en blauwwaarde alle drie hexadecimale getallen van twee gelijke cijfers zijn, mag de kleur worden afgekort tot 3 maal één cijfer:

Voorbeelden:
• #886622 kan worden afgekort tot #862
• #ffffff kan worden afgekort tot #fff
• #ff0033 kan worden afgekort tot #f03
• #800008 kan niet worden afgekort, want de roodwaarde (80) en de blauwwaarde (08) bestaan uit verschillende cijfers

Opmerking

De methode met hexadecimale kleuren is de oudste methode om kleuren op te geven in html en css.

4. HSL kleuren

HSL staat voor Hue (kleur), Saturation (verzadiging), Lightness (helderheid). Een kleur wordt opgegeven in de vorm: hsl(kleur, verzadiging%, helderheid%)

• De kleur wordt aangegeven als een getal tussen 0 en 360:
• De verzadiging wordt aangegeven door een percentage tussen 0% en 100%.
  Hoe hoger het percentage, hoe verzadigder (dieper) de kleur.
  Hoe lager het percentage, hoe fletser de kleur.
  0% is kleurloos. Afhankelijk van de helderheid is dat zwart, grijs, wit.
• De helderheid wordt aangegeven met een percentage tussen 0% en 100%.
  0% is donker (zwart), 100% is zo licht mogelijk (wit).
• Bij een verzadiging van 100% en een helderheid van 50% is de kleur het diepst (zuiverst).

De kleuren van figuur 1, 2, 3 zijn hieronder genoteerd als hsl-kleuren: figuur 4: hsl-kleuren hsl(0,0%,100%) hsl(0,0%,83%) hsl(0,0%,75%) hsl(0,0%,50%) hsl(0,0%,0%)
hsl(0,100%,50%) hsl(0,100%,25%) hsl(0,59%,41%) hsl(39,100%,50%) hsl(60,100%,50%)
hsl(120,100%,25%) hsl(80,61%,50%) hsl(60,100%,25%) hsl(180,100%,25%) hsl(120,100%,50%)
hsl(240,100%,50%) hsl(240,100%,25%) hsl(207,44%,49%) hsl(197,71%,73%) hsl(180,100%,50%)
hsl(300,100%,50%) hsl(300,100%,25%) hsl(302,44%,65%) hsl(300,76%,72%) hsl(350,100%,88%)

Voorbeeld

5. RGBA kleuren

RGBA is een uitbreiding van RGB-kleuren. Er is een vierde getal toegevoegd, het 'alpha-kanaal': rgb(rood, groen, blauw,alpha) Het alpha-kanaal geeft de ondoorzichtigheid (engels: opacity) aan.:

• 0 is volledig transparant.
• 0.5 is half transparant
• 1.0 is volledig ondoorzichtig

Voorbeeld

In de linkerkolom gaat de onderzichtigheid van de voorgrondkleur in stappen omlaag,
in de rechter kolom gaat de onderzichtigheid van de achtergrondkleur in stappen omlaag.

De codes zijn hier weergegeven in hun eigen kleur en transparantie.

Zie ook de opmerking hieronder bij HSLA kleuren.

6. HSLA kleuren

HSLA is een uitbreiding van HSL-kleuren. Er is een vierde getal toegevoegd, het 'alpha-kanaal': hsl(kleur, verzadiging%, helderheid%, alpha) Net als bij RGBA geeft het alpha-kanaal de ondoorzichtigheid aan.

Voorbeelden

In de linkerkolom gaat de onderzichtigheid van de voorgrondkleur in stappen omlaag,
in de rechter kolom gaat de onderzichtigheid van de achtergrondkleur in stappen omlaag.

De codes zijn hier weergegeven in hun eigen kleur en transparantie.

Opmerking

Bij een alpha-kanaal waarde kleiner dan 1 is de laag eronder zichtbaar. Zie het voorbeeld.
Links is het alphakaal 0.70 (30% transparant), rechts 0.40 (60% transparant):