Kleuren HSL

HSL-rekenmachine

RGB(255, 0, 0)
#ff0000

HSL-kleuren

HSL-kleurwaarden worden ondersteund in IE9+, Firefox, Chrome, Safari en in Opera 10+.

HSL staat voor tint, verzadiging en lichtheid.

HSL-kleurwaarden worden aangegeven met: .hsl(hue, saturation, lightness)

Tint

Tint is een graad op het kleurenwiel van 0 tot 360. 0 is rood, 120 is groen, 240 is blauw.

Verzadiging

Verzadiging is een procentuele waarde; 0% betekent een grijstint en 100% is de volledige kleur.

Lichtheid

Lichtheid is ook een percentage; 0% is zwart, 100% is wit.

"; } x += ""; x += ""; n = 0; for (i = 0; i "; } x += ""; x += ""; document.getElementById("huetable"). innerHTML = x; } function drawSatTable(hue) { var x, i; x = "" x += ""; for (i = 0; i "; } x += ""; x += ""; for ( ik = 0; ik "; } x += "

" + i + "

"; document.getElementById("saturationtable").innerHTML = x; } function drawLigTable(hue) { var x, i; x = "" x += ""; for (i = 0; i "; } x += ""; x += ""; voor (i = 0; i "; } x += "

" + i + "

"; document.getElementById("lightnesstable").innerHTML = x; } drawHueTable(0); drawSatTable(0); drawLigTable(0);

Probeer het zelf

HSL-kleurwaarden worden ondersteund in alle belangrijke browsers.

Voorbeeld

<style>

div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}

</style>

❮ Vorig Volgende ❯

Kleuren Tutorial

Kleurenschema 's

Kleurtrends _

Kleurstandaarden _