Websites met stijl

Naslag: kleur

Op dit nasagblad

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
color: yellow; background-color: navy; Resultaat
Opmerkingen:

2: RGB kleuren

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

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
color: rgb(255,255,0); background-color: rgb(0,0,128); Resultaat

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:

Oranje wordt dus hexadecimaal opgeven als #ffa500. (Het mag ook in hoofdletters: #FFA500).

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
color: #ffff00; background-color: #000080; Resultaat
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:

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 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
color: hsl(60,100%,50%); background-color: hsl(240,100%,25%); Resultaat


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.:

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.

color: rgba(0,0,255, 1); background-color: rgba(243, 234, 191,1); color: rgba(0,0,255, .7); background-color: rgba(243, 234, 191, .7); color: rgba(0,0,255, .4); background-color: rgba(243, 234, 191, .4); color: rgba(0,0,255, .1); background-color: rgba(243, 234, 191, .1);

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.

color: hsla(240,100%,50%) 1); background-color: hsla(50, 68%,85%,1); color: hsla(240,100%,50%) .7); background-color: hsla(50, 68%,85%, .7); color: hsla(240,100%,50%) .4); background-color: hsla(50, 68%,85%, .4); color: hsla(240,100%,50%) .1); background-color: hsla(50, 68%,85%, .1);
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):

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst