<html lang="en">
<title>CSS 3.0 HSL color support test</title>
<style type="text/css">
h1#red {color: hsl(0, 100%, 50%) }
h1#green {color: hsl(120, 100%, 50%) }
h1#blue {color: hsl(240, 100%, 50%) }
h1#aqua {color: hsl(180, 100%, 50%) }
h1#darkgreen {color: hsl(120, 100%, 25%) }
h1#lightgreen {color: hsl(120, 100%, 75%) }
h1#pastelgreen {color: hsl(120, 50%, 50%) }
h1#twohundredgreen {color: hsl(120, 200%, 50%) }
h1#grey {color: hsl(120, 0%, 50%) }
h1#negpercentgrey {color: hsl(120, -100%, 50%) }
h1#threesixtydarkgreen {color: hsl(480, 100%, 25%) }
h1#neghuelightgreen {color: hsl(-240, 100%, 75%) }
h1#neghuethreesixtylightgreen {color: hsl(-600, 100%, 75%) }
h1#redFloat {color: hsl(0.0, 100%, 50%) }
h1#greenFloat {color: hsl(120.00, 100%, 50%) }
h1#blueFloat {color: hsl(240.000, 100%, 50%) }
</style>
</head>
<body>
<h1 id="red">This should be red: hsl(0, 100%, 50%)</h1>
<h1 id="green">This should be green: hsl(120, 100%, 50%)</h1>
<h1 id="aqua">This should be aqua: hsl(180, 100%, 50%)</h1>
<h1 id="blue">This should be blue: hsl(240, 100%, 50%)</h1>
<h1 id="lightgreen">This should be light green: hsl(120, 100%, 75%)</h1>
<h1 id="darkgreen">This should be dark green: hsl(120, 100%, 25%)</h1>
<h1 id="pastelgreen">This should be pastel green: hsl(120, 50%, 50%)</h1>
<b>Out of bounds cases:</b><br>
Check percentages larger than 100%, should be limited to 100%
<h1 id="green">This should be green: hsl(120, 100%, 50%)</h1>
<h1 id="twohundredgreen">This should be green too: hsl(120, 200%, 50%) </h1>
Check percentages less than 0% (negative values), should be limited to 0%
<h1 id="grey">This should be grey: hsl(120, 0%, 50%) </h1>
<h1 id="negpercentgrey">This should be grey, too: hsl(120, -100%, 50%) </h1>
Check Hue values that are larger than 360, should be normalized back to a value between 0 and 360. As Hue values are in degrees, there is no maximum like percentages, they are loop around.
<h1 id="darkgreen">This should be dark green: hsl(120, 100%, 25%) </h1>
<h1 id="threesixtydarkgreen">This should be dark green, too: hsl(480, 100%, 25%) </h1>
Check Hue values with a negative angle.
<h1 id="lightgreen">This should be light green: hsl(120, 100%, 75%)</h1>
<h1 id="neghuelightgreen">This should be light green, too: hsl(-240, 100%, 75%)</h1>
<h1 id="neghuethreesixtylightgreen">This should be light green, too: hsl(-600, 100%, 75%)</h1>
Check Hues values with a floating point angle.
<h1 id="redFloat">This should be red: hsl(0.0, 100%, 50%)</h1>
<h1 id="greenFloat">This should be green: hsl(120.00, 100%, 50%)</h1>
<h1 id="blueFloat">This should be blue: hsl(240.000, 100%, 50%)</h1>
</body>
</html>
Codebase Browser
chromium