summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMichael Drake <tlsa@netsurf-browser.org>2011-01-21 21:03:50 (GMT)
committer Michael Drake <tlsa@netsurf-browser.org>2011-01-21 21:03:50 (GMT)
commite0c1fe07965bae7dc979c6c5bcc9d56a5c51c652 (patch)
tree6f83ff70bb2cdbe72b182d514a81e55aa44a6b8f
parent6b51f2b8a3f930e846a62b1ac0e87a91289b353a (diff)
downloadnetsurftest-e0c1fe07965bae7dc979c6c5bcc9d56a5c51c652.tar.gz
netsurftest-e0c1fe07965bae7dc979c6c5bcc9d56a5c51c652.tar.bz2
Add tests for CSS3 HSL colour support.
svn path=/trunk/netsurftest/; revision=11435
-rw-r--r--other/colour/hslwheel.html284
-rw-r--r--other/colour/huetest.html3071
2 files changed, 3355 insertions, 0 deletions
diff --git a/other/colour/hslwheel.html b/other/colour/hslwheel.html
new file mode 100644
index 0000000..35ecff4
--- a/dev/null
+++ b/other/colour/hslwheel.html
@@ -0,0 +1,284 @@
+<head>
+<title>HSL comparison to RGB</title>
+<style type="text/css">
+.hslexample { width:100%; }
+.rgbexample { width:100%; }
+</style>
+</head>
+<body>
+<h1>HSL comparison to RGB</h1>
+
+
+<table class=rgbexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=10>RGB/HSL colours at 50% lightness
+
+ <tr>
+ <th>
+
+ <th colspan=10>Saturation
+
+ <tr>
+ <th>Angle
+ <th colspan=2>100%
+ <th colspan=2>75%
+ <th colspan=2>50%
+ <th colspan=2>25%
+ <th colspan=2>0%
+
+ <tr>
+ <th> 0
+
+ <td style="background:#FF0000">&nbsp;
+ <td style="background:hsl(0, 100%, 50%)">&nbsp;
+ <td style="background:#DF2020">&nbsp;
+ <td style="background:hsl(0, 75%, 50%)">&nbsp;
+ <td style="background:#BF4040">&nbsp;
+ <td style="background:hsl(0, 50%, 50%)">&nbsp;
+ <td style="background:#9F6060">&nbsp;
+ <td style="background:hsl(0, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(0, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 15
+
+ <td style="background:#FF4000">&nbsp;
+ <td style="background:hsl(15, 100%, 50%)">&nbsp;
+ <td style="background:#DF5020">&nbsp;
+ <td style="background:hsl(15, 75%, 50%)">&nbsp;
+ <td style="background:#BF6040">&nbsp;
+ <td style="background:hsl(15, 50%, 50%)">&nbsp;
+ <td style="background:#9F7060">&nbsp;
+ <td style="background:hsl(15, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(15, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 30
+
+ <td style="background:#FF8000">&nbsp;
+ <td style="background:hsl(30, 100%, 50%)">&nbsp;
+ <td style="background:#DF8020">&nbsp;
+ <td style="background:hsl(30, 75%, 50%)">&nbsp;
+ <td style="background:#BF8040">&nbsp;
+ <td style="background:hsl(30, 50%, 50%)">&nbsp;
+ <td style="background:#9F8060">&nbsp;
+ <td style="background:hsl(30, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(30, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 45
+
+ <td style="background:#FFBF00">&nbsp;
+ <td style="background:hsl(45, 100%, 50%)">&nbsp;
+ <td style="background:#DFAF20">&nbsp;
+ <td style="background:hsl(45, 75%, 50%)">&nbsp;
+ <td style="background:#BF9F40">&nbsp;
+ <td style="background:hsl(45, 50%, 50%)">&nbsp;
+ <td style="background:#9F8F60">&nbsp;
+ <td style="background:hsl(45, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(45, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 60
+
+ <td style="background:#FFFF00">&nbsp;
+ <td style="background:hsl(60, 100%, 50%)">&nbsp;
+ <td style="background:#DFDF20">&nbsp;
+ <td style="background:hsl(60, 75%, 50%)">&nbsp;
+ <td style="background:#BFBF40">&nbsp;
+ <td style="background:hsl(60, 50%, 50%)">&nbsp;
+ <td style="background:#9F9F60">&nbsp;
+ <td style="background:hsl(60, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(60, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#BFFF00">&nbsp;
+ <td style="background:hsl(75, 100%, 50%)">&nbsp;
+ <td style="background:#AFDF20">&nbsp;
+ <td style="background:hsl(75, 75%, 50%)">&nbsp;
+ <td style="background:#9FBF40">&nbsp;
+ <td style="background:hsl(75, 50%, 50%)">&nbsp;
+ <td style="background:#8F9F60">&nbsp;
+ <td style="background:hsl(75, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(75, 0%, 50%)">&nbsp;
+
+
+
+ <tr>
+ <th> 90
+
+ <td style="background:#80FF00">&nbsp;
+ <td style="background:hsl(90, 100%, 50%)">&nbsp;
+ <td style="background:#80DF20">&nbsp;
+ <td style="background:hsl(90, 75%, 50%)">&nbsp;
+ <td style="background:#80BF40">&nbsp;
+ <td style="background:hsl(90, 50%, 50%)">&nbsp;
+ <td style="background:#809F60">&nbsp;
+ <td style="background:hsl(90, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(90, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 105
+
+ <td style="background:#40FF00">&nbsp;
+ <td style="background:hsl(105, 100%, 50%)">&nbsp;
+ <td style="background:#50DF20">&nbsp;
+ <td style="background:hsl(105, 75%, 50%)">&nbsp;
+ <td style="background:#60BF40">&nbsp;
+ <td style="background:hsl(105, 50%, 50%)">&nbsp;
+ <td style="background:#709F60">&nbsp;
+ <td style="background:hsl(105, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(105, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 120
+
+ <td style="background:#00FF00">&nbsp;
+ <td style="background:hsl(120, 100%, 50%)">&nbsp;
+ <td style="background:#20DF20">&nbsp;
+ <td style="background:hsl(120, 75%, 50%)">&nbsp;
+ <td style="background:#40BF40">&nbsp;
+ <td style="background:hsl(120, 50%, 50%)">&nbsp;
+ <td style="background:#609F60">&nbsp;
+ <td style="background:hsl(120, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(120, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 135
+
+ <td style="background:#00FF40">&nbsp;
+ <td style="background:hsl(135, 100%, 50%)">&nbsp;
+ <td style="background:#20DF50">&nbsp;
+ <td style="background:hsl(135, 75%, 50%)">&nbsp;
+ <td style="background:#40BF60">&nbsp;
+ <td style="background:hsl(135, 50%, 50%)">&nbsp;
+ <td style="background:#609F70">&nbsp;
+ <td style="background:hsl(135, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(135, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 150
+
+ <td style="background:#00FF80">&nbsp;
+ <td style="background:hsl(150, 100%, 50%)">&nbsp;
+ <td style="background:#20DF80">&nbsp;
+ <td style="background:hsl(150, 75%, 50%)">&nbsp;
+ <td style="background:#40BF80">&nbsp;
+ <td style="background:hsl(150, 50%, 50%)">&nbsp;
+ <td style="background:#609F80">&nbsp;
+ <td style="background:hsl(150, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(150, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 180
+
+ <td style="background:#00FFFF">&nbsp;
+ <td style="background:hsl(180, 100%, 50%)">&nbsp;
+ <td style="background:#20DFDF">&nbsp;
+ <td style="background:hsl(180, 75%, 50%)">&nbsp;
+ <td style="background:#40BFBF">&nbsp;
+ <td style="background:hsl(180, 50%, 50%)">&nbsp;
+ <td style="background:#609F9F">&nbsp;
+ <td style="background:hsl(180, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(180, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 210
+
+ <td style="background:#0080FF">&nbsp;
+ <td style="background:hsl(210, 100%, 50%)">&nbsp;
+ <td style="background:#2080DF">&nbsp;
+ <td style="background:hsl(210, 75%, 50%)">&nbsp;
+ <td style="background:#4080BF">&nbsp;
+ <td style="background:hsl(210, 50%, 50%)">&nbsp;
+ <td style="background:#60809F">&nbsp;
+ <td style="background:hsl(210, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(210, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 240
+
+ <td style="background:#0000FF">&nbsp;
+ <td style="background:hsl(240, 100%, 50%)">&nbsp;
+ <td style="background:#2020DF">&nbsp;
+ <td style="background:hsl(240, 75%, 50%)">&nbsp;
+ <td style="background:#4040BF">&nbsp;
+ <td style="background:hsl(240, 50%, 50%)">&nbsp;
+ <td style="background:#60609F">&nbsp;
+ <td style="background:hsl(240, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(240, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 270
+
+ <td style="background:#8000FF">&nbsp;
+ <td style="background:hsl(270, 100%, 50%)">&nbsp;
+ <td style="background:#8020DF">&nbsp;
+ <td style="background:hsl(270, 75%, 50%)">&nbsp;
+ <td style="background:#8040BF">&nbsp;
+ <td style="background:hsl(270, 50%, 50%)">&nbsp;
+ <td style="background:#80609F">&nbsp;
+ <td style="background:hsl(270, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(270, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 300
+
+ <td style="background:#FF00FF">&nbsp;
+ <td style="background:hsl(300, 100%, 50%)">&nbsp;
+ <td style="background:#DF20DF">&nbsp;
+ <td style="background:hsl(300, 75%, 50%)">&nbsp;
+ <td style="background:#BF40BF">&nbsp;
+ <td style="background:hsl(300, 50%, 50%)">&nbsp;
+ <td style="background:#9F609F">&nbsp;
+ <td style="background:hsl(300, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(300, 0%, 50%)">&nbsp;
+
+
+ <tr>
+ <th> 330
+
+ <td style="background:#FF0080">&nbsp;
+ <td style="background:hsl(330, 100%, 50%)">&nbsp;
+ <td style="background:#DF2080">&nbsp;
+ <td style="background:hsl(330, 75%, 50%)">&nbsp;
+ <td style="background:#BF4080">&nbsp;
+ <td style="background:hsl(330, 50%, 50%)">&nbsp;
+ <td style="background:#9F6080">&nbsp;
+ <td style="background:hsl(330, 25%, 50%)">&nbsp;
+ <td style="background:#808080">&nbsp;
+ <td style="background:hsl(330, 0%, 50%)">&nbsp;
+
+</table>
+
+</body>
diff --git a/other/colour/huetest.html b/other/colour/huetest.html
new file mode 100644
index 0000000..c803356
--- a/dev/null
+++ b/other/colour/huetest.html
@@ -0,0 +1,3071 @@
+<head>
+<title>HSL comparison to RGB from w3c spec</title>
+<style type="text/css">
+.hslexample { width:100%; }
+.rgbexample { width:100%; }
+</style>
+</head>
+<body>
+<h1>HSL comparison to RGB from w3c spec</h1>
+
+<table>
+<tr>
+<th>CSS Colour blocks expressed using RGB syntax</th>
+<th>CSS Colour blocks expressed using HSL syntax</th>
+</tr>
+<tr>
+
+<td>
+
+<table class=rgbexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>0&deg; Reds (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+ <td style="background:#FFFFFF">&nbsp;
+ <td style="background:#FFFFFF">&nbsp;
+ <td style="background:#FFFFFF">&nbsp;
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#FFBFBF">&nbsp;
+ <td style="background:#F7C7C7">&nbsp;
+ <td style="background:#EFCFCF">&nbsp;
+ <td style="background:#E7D7D7">&nbsp;
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#FF8080">&nbsp;
+ <td style="background:#EF8F8F">&nbsp;
+ <td style="background:#DF9F9F">&nbsp;
+ <td style="background:#CFAFAF">&nbsp;
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#FF4040">&nbsp;
+ <td style="background:#E75858">&nbsp;
+ <td style="background:#CF7070">&nbsp;
+ <td style="background:#B78787">&nbsp;
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#FF0000">&nbsp;
+ <td style="background:#DF2020">&nbsp;
+ <td style="background:#BF4040">&nbsp;
+ <td style="background:#9F6060">&nbsp;
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#BF0000">&nbsp;
+ <td style="background:#A71818">&nbsp;
+ <td style="background:#8F3030">&nbsp;
+ <td style="background:#784848">&nbsp;
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#800000">&nbsp;
+ <td style="background:#701010">&nbsp;
+ <td style="background:#602020">&nbsp;
+ <td style="background:#503030">&nbsp;
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#400000">&nbsp;
+ <td style="background:#380808">&nbsp;
+ <td style="background:#301010">&nbsp;
+ <td style="background:#281818">&nbsp;
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+ <td style="background:#000000">&nbsp;
+ <td style="background:#000000">&nbsp;
+ <td style="background:#000000">&nbsp;
+ <td style="background:#000000">&nbsp;
+ </table>
+
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>0&deg; Reds (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(0, 100%, 100%)">&nbsp;
+ <td style="background:hsl(0, 75%, 100%)">&nbsp;
+ <td style="background:hsl(0, 50%, 100%)">&nbsp;
+ <td style="background:hsl(0, 25%, 100%)">&nbsp;
+ <td style="background:hsl(0, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(0, 100%, 88%)">&nbsp;
+ <td style="background:hsl(0, 75%, 88%)">&nbsp;
+ <td style="background:hsl(0, 50%, 88%)">&nbsp;
+ <td style="background:hsl(0, 25%, 88%)">&nbsp;
+ <td style="background:hsl(0, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(0, 100%, 75%)">&nbsp;
+ <td style="background:hsl(0, 75%, 75%)">&nbsp;
+ <td style="background:hsl(0, 50%, 75%)">&nbsp;
+ <td style="background:hsl(0, 25%, 75%)">&nbsp;
+ <td style="background:hsl(0, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(0, 100%, 63%)">&nbsp;
+ <td style="background:hsl(0, 75%, 63%)">&nbsp;
+ <td style="background:hsl(0, 50%, 63%)">&nbsp;
+ <td style="background:hsl(0, 25%, 63%)">&nbsp;
+ <td style="background:hsl(0, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(0, 100%, 50%)">&nbsp;
+ <td style="background:hsl(0, 75%, 50%)">&nbsp;
+ <td style="background:hsl(0, 50%, 50%)">&nbsp;
+ <td style="background:hsl(0, 25%, 50%)">&nbsp;
+ <td style="background:hsl(0, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(0, 100%, 38%)">&nbsp;
+ <td style="background:hsl(0, 75%, 38%)">&nbsp;
+ <td style="background:hsl(0, 50%, 38%)">&nbsp;
+ <td style="background:hsl(0, 25%, 38%)">&nbsp;
+ <td style="background:hsl(0, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(0, 100%, 25%)">&nbsp;
+ <td style="background:hsl(0, 75%, 25%)">&nbsp;
+ <td style="background:hsl(0, 50%, 25%)">&nbsp;
+ <td style="background:hsl(0, 25%, 25%)">&nbsp;
+ <td style="background:hsl(0, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(0, 100%, 13%)">&nbsp;
+ <td style="background:hsl(0, 75%, 13%)">&nbsp;
+ <td style="background:hsl(0, 50%, 13%)">&nbsp;
+ <td style="background:hsl(0, 25%, 13%)">&nbsp;
+ <td style="background:hsl(0, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(0, 100%, 0%)">&nbsp;
+ <td style="background:hsl(0, 75%, 0%)">&nbsp;
+ <td style="background:hsl(0, 50%, 0%)">&nbsp;
+ <td style="background:hsl(0, 25%, 0%)">&nbsp;
+ <td style="background:hsl(0, 0%, 0%)">&nbsp;
+ </table>
+</td>
+</tr>
+<tr>
+<td>
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>30&deg; Red-Yellows (=Oranges) (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#FFDFBF">&nbsp;
+
+ <td style="background:#F7DFC7">&nbsp;
+
+ <td style="background:#EFDFCF">&nbsp;
+
+ <td style="background:#E7DFD7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#FFBF80">&nbsp;
+
+ <td style="background:#EFBF8F">&nbsp;
+
+ <td style="background:#DFBF9F">&nbsp;
+
+ <td style="background:#CFBFAF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#FF9F40">&nbsp;
+
+ <td style="background:#E79F58">&nbsp;
+
+ <td style="background:#CF9F70">&nbsp;
+
+ <td style="background:#B79F87">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#FF8000">&nbsp;
+
+ <td style="background:#DF8020">&nbsp;
+
+ <td style="background:#BF8040">&nbsp;
+
+ <td style="background:#9F8060">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#BF6000">&nbsp;
+
+ <td style="background:#A76018">&nbsp;
+
+ <td style="background:#8F6030">&nbsp;
+
+ <td style="background:#786048">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#804000">&nbsp;
+
+ <td style="background:#704010">&nbsp;
+
+ <td style="background:#604020">&nbsp;
+
+ <td style="background:#504030">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#402000">&nbsp;
+
+ <td style="background:#382008">&nbsp;
+
+ <td style="background:#302010">&nbsp;
+
+ <td style="background:#282018">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>30&deg; Red-Yellows (=Oranges) (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(30, 100%, 100%)">&nbsp;
+ <td style="background:hsl(30, 75%, 100%)">&nbsp;
+ <td style="background:hsl(30, 50%, 100%)">&nbsp;
+ <td style="background:hsl(30, 25%, 100%)">&nbsp;
+ <td style="background:hsl(30, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(30, 100%, 88%)">&nbsp;
+ <td style="background:hsl(30, 75%, 88%)">&nbsp;
+ <td style="background:hsl(30, 50%, 88%)">&nbsp;
+ <td style="background:hsl(30, 25%, 88%)">&nbsp;
+ <td style="background:hsl(30, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(30, 100%, 75%)">&nbsp;
+ <td style="background:hsl(30, 75%, 75%)">&nbsp;
+ <td style="background:hsl(30, 50%, 75%)">&nbsp;
+ <td style="background:hsl(30, 25%, 75%)">&nbsp;
+ <td style="background:hsl(30, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(30, 100%, 63%)">&nbsp;
+ <td style="background:hsl(30, 75%, 63%)">&nbsp;
+ <td style="background:hsl(30, 50%, 63%)">&nbsp;
+ <td style="background:hsl(30, 25%, 63%)">&nbsp;
+ <td style="background:hsl(30, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(30, 100%, 50%)">&nbsp;
+ <td style="background:hsl(30, 75%, 50%)">&nbsp;
+ <td style="background:hsl(30, 50%, 50%)">&nbsp;
+ <td style="background:hsl(30, 25%, 50%)">&nbsp;
+ <td style="background:hsl(30, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(30, 100%, 38%)">&nbsp;
+ <td style="background:hsl(30, 75%, 38%)">&nbsp;
+ <td style="background:hsl(30, 50%, 38%)">&nbsp;
+ <td style="background:hsl(30, 25%, 38%)">&nbsp;
+ <td style="background:hsl(30, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(30, 100%, 25%)">&nbsp;
+ <td style="background:hsl(30, 75%, 25%)">&nbsp;
+ <td style="background:hsl(30, 50%, 25%)">&nbsp;
+ <td style="background:hsl(30, 25%, 25%)">&nbsp;
+ <td style="background:hsl(30, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(30, 100%, 13%)">&nbsp;
+ <td style="background:hsl(30, 75%, 13%)">&nbsp;
+ <td style="background:hsl(30, 50%, 13%)">&nbsp;
+ <td style="background:hsl(30, 25%, 13%)">&nbsp;
+ <td style="background:hsl(30, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(30, 100%, 0%)">&nbsp;
+ <td style="background:hsl(30, 75%, 0%)">&nbsp;
+ <td style="background:hsl(30, 50%, 0%)">&nbsp;
+ <td style="background:hsl(30, 25%, 0%)">&nbsp;
+ <td style="background:hsl(30, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+
+ <table class=rgbexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>60&deg; Yellows (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#FFFFBF">&nbsp;
+
+ <td style="background:#F7F7C7">&nbsp;
+
+ <td style="background:#EFEFCF">&nbsp;
+
+ <td style="background:#E7E7D7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#FFFF80">&nbsp;
+
+ <td style="background:#EFEF8F">&nbsp;
+
+ <td style="background:#DFDF9F">&nbsp;
+
+ <td style="background:#CFCFAF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#FFFF40">&nbsp;
+
+ <td style="background:#E7E758">&nbsp;
+
+ <td style="background:#CFCF70">&nbsp;
+
+ <td style="background:#B7B787">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#FFFF00">&nbsp;
+
+ <td style="background:#DFDF20">&nbsp;
+
+ <td style="background:#BFBF40">&nbsp;
+
+ <td style="background:#9F9F60">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#BFBF00">&nbsp;
+
+ <td style="background:#A7A718">&nbsp;
+
+ <td style="background:#8F8F30">&nbsp;
+
+ <td style="background:#787848">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#808000">&nbsp;
+
+ <td style="background:#707010">&nbsp;
+
+ <td style="background:#606020">&nbsp;
+
+ <td style="background:#505030">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#404000">&nbsp;
+
+ <td style="background:#383808">&nbsp;
+
+ <td style="background:#303010">&nbsp;
+
+ <td style="background:#282818">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>60&deg; Yellows (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(60, 100%, 100%)">&nbsp;
+ <td style="background:hsl(60, 75%, 100%)">&nbsp;
+ <td style="background:hsl(60, 50%, 100%)">&nbsp;
+ <td style="background:hsl(60, 25%, 100%)">&nbsp;
+ <td style="background:hsl(60, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(60, 100%, 88%)">&nbsp;
+ <td style="background:hsl(60, 75%, 88%)">&nbsp;
+ <td style="background:hsl(60, 50%, 88%)">&nbsp;
+ <td style="background:hsl(60, 25%, 88%)">&nbsp;
+ <td style="background:hsl(60, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(60, 100%, 75%)">&nbsp;
+ <td style="background:hsl(60, 75%, 75%)">&nbsp;
+ <td style="background:hsl(60, 50%, 75%)">&nbsp;
+ <td style="background:hsl(60, 25%, 75%)">&nbsp;
+ <td style="background:hsl(60, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(60, 100%, 63%)">&nbsp;
+ <td style="background:hsl(60, 75%, 63%)">&nbsp;
+ <td style="background:hsl(60, 50%, 63%)">&nbsp;
+ <td style="background:hsl(60, 25%, 63%)">&nbsp;
+ <td style="background:hsl(60, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(60, 100%, 50%)">&nbsp;
+ <td style="background:hsl(60, 75%, 50%)">&nbsp;
+ <td style="background:hsl(60, 50%, 50%)">&nbsp;
+ <td style="background:hsl(60, 25%, 50%)">&nbsp;
+ <td style="background:hsl(60, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(60, 100%, 38%)">&nbsp;
+ <td style="background:hsl(60, 75%, 38%)">&nbsp;
+ <td style="background:hsl(60, 50%, 38%)">&nbsp;
+ <td style="background:hsl(60, 25%, 38%)">&nbsp;
+ <td style="background:hsl(60, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(60, 100%, 25%)">&nbsp;
+ <td style="background:hsl(60, 75%, 25%)">&nbsp;
+ <td style="background:hsl(60, 50%, 25%)">&nbsp;
+ <td style="background:hsl(60, 25%, 25%)">&nbsp;
+ <td style="background:hsl(60, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(60, 100%, 13%)">&nbsp;
+ <td style="background:hsl(60, 75%, 13%)">&nbsp;
+ <td style="background:hsl(60, 50%, 13%)">&nbsp;
+ <td style="background:hsl(60, 25%, 13%)">&nbsp;
+ <td style="background:hsl(60, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(60, 100%, 0%)">&nbsp;
+ <td style="background:hsl(60, 75%, 0%)">&nbsp;
+ <td style="background:hsl(60, 50%, 0%)">&nbsp;
+ <td style="background:hsl(60, 25%, 0%)">&nbsp;
+ <td style="background:hsl(60, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>90&deg; Yellow-Greens (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#DFFFBF">&nbsp;
+
+ <td style="background:#DFF7C7">&nbsp;
+
+ <td style="background:#DFEFCF">&nbsp;
+
+ <td style="background:#DFE7D7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#BFFF80">&nbsp;
+
+ <td style="background:#BFEF8F">&nbsp;
+
+ <td style="background:#BFDF9F">&nbsp;
+
+ <td style="background:#BFCFAF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#9FFF40">&nbsp;
+
+ <td style="background:#9FE758">&nbsp;
+
+ <td style="background:#9FCF70">&nbsp;
+
+ <td style="background:#9FB787">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#80FF00">&nbsp;
+
+ <td style="background:#80DF20">&nbsp;
+
+ <td style="background:#80BF40">&nbsp;
+
+ <td style="background:#809F60">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#60BF00">&nbsp;
+
+ <td style="background:#60A718">&nbsp;
+
+ <td style="background:#608F30">&nbsp;
+
+ <td style="background:#607848">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#408000">&nbsp;
+
+ <td style="background:#407010">&nbsp;
+
+ <td style="background:#406020">&nbsp;
+
+ <td style="background:#405030">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#204000">&nbsp;
+
+ <td style="background:#203808">&nbsp;
+
+ <td style="background:#203010">&nbsp;
+
+ <td style="background:#202818">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>90&deg; Yellow-Greens (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(90, 100%, 100%)">&nbsp;
+ <td style="background:hsl(90, 75%, 100%)">&nbsp;
+ <td style="background:hsl(90, 50%, 100%)">&nbsp;
+ <td style="background:hsl(90, 25%, 100%)">&nbsp;
+ <td style="background:hsl(90, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(90, 100%, 88%)">&nbsp;
+ <td style="background:hsl(90, 75%, 88%)">&nbsp;
+ <td style="background:hsl(90, 50%, 88%)">&nbsp;
+ <td style="background:hsl(90, 25%, 88%)">&nbsp;
+ <td style="background:hsl(90, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(90, 100%, 75%)">&nbsp;
+ <td style="background:hsl(90, 75%, 75%)">&nbsp;
+ <td style="background:hsl(90, 50%, 75%)">&nbsp;
+ <td style="background:hsl(90, 25%, 75%)">&nbsp;
+ <td style="background:hsl(90, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(90, 100%, 63%)">&nbsp;
+ <td style="background:hsl(90, 75%, 63%)">&nbsp;
+ <td style="background:hsl(90, 50%, 63%)">&nbsp;
+ <td style="background:hsl(90, 25%, 63%)">&nbsp;
+ <td style="background:hsl(90, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(90, 100%, 50%)">&nbsp;
+ <td style="background:hsl(90, 75%, 50%)">&nbsp;
+ <td style="background:hsl(90, 50%, 50%)">&nbsp;
+ <td style="background:hsl(90, 25%, 50%)">&nbsp;
+ <td style="background:hsl(90, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(90, 100%, 38%)">&nbsp;
+ <td style="background:hsl(90, 75%, 38%)">&nbsp;
+ <td style="background:hsl(90, 50%, 38%)">&nbsp;
+ <td style="background:hsl(90, 25%, 38%)">&nbsp;
+ <td style="background:hsl(90, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(90, 100%, 25%)">&nbsp;
+ <td style="background:hsl(90, 75%, 25%)">&nbsp;
+ <td style="background:hsl(90, 50%, 25%)">&nbsp;
+ <td style="background:hsl(90, 25%, 25%)">&nbsp;
+ <td style="background:hsl(90, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(90, 100%, 13%)">&nbsp;
+ <td style="background:hsl(90, 75%, 13%)">&nbsp;
+ <td style="background:hsl(90, 50%, 13%)">&nbsp;
+ <td style="background:hsl(90, 25%, 13%)">&nbsp;
+ <td style="background:hsl(90, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(90, 100%, 0%)">&nbsp;
+ <td style="background:hsl(90, 75%, 0%)">&nbsp;
+ <td style="background:hsl(90, 50%, 0%)">&nbsp;
+ <td style="background:hsl(90, 25%, 0%)">&nbsp;
+ <td style="background:hsl(90, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>120&deg; Greens (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#BFFFBF">&nbsp;
+
+ <td style="background:#C7F7C7">&nbsp;
+
+ <td style="background:#CFEFCF">&nbsp;
+
+ <td style="background:#D7E7D7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#80FF80">&nbsp;
+
+ <td style="background:#8FEF8F">&nbsp;
+
+ <td style="background:#9FDF9F">&nbsp;
+
+ <td style="background:#AFCFAF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#40FF40">&nbsp;
+
+ <td style="background:#58E758">&nbsp;
+
+ <td style="background:#70CF70">&nbsp;
+
+ <td style="background:#87B787">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#00FF00">&nbsp;
+
+ <td style="background:#20DF20">&nbsp;
+
+ <td style="background:#40BF40">&nbsp;
+
+ <td style="background:#609F60">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#00BF00">&nbsp;
+
+ <td style="background:#18A718">&nbsp;
+
+ <td style="background:#308F30">&nbsp;
+
+ <td style="background:#487848">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#008000">&nbsp;
+
+ <td style="background:#107010">&nbsp;
+
+ <td style="background:#206020">&nbsp;
+
+ <td style="background:#305030">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#004000">&nbsp;
+
+ <td style="background:#083808">&nbsp;
+
+ <td style="background:#103010">&nbsp;
+
+ <td style="background:#182818">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>120&deg; Greens (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(120, 100%, 100%)">&nbsp;
+ <td style="background:hsl(120, 75%, 100%)">&nbsp;
+ <td style="background:hsl(120, 50%, 100%)">&nbsp;
+ <td style="background:hsl(120, 25%, 100%)">&nbsp;
+ <td style="background:hsl(120, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(120, 100%, 88%)">&nbsp;
+ <td style="background:hsl(120, 75%, 88%)">&nbsp;
+ <td style="background:hsl(120, 50%, 88%)">&nbsp;
+ <td style="background:hsl(120, 25%, 88%)">&nbsp;
+ <td style="background:hsl(120, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(120, 100%, 75%)">&nbsp;
+ <td style="background:hsl(120, 75%, 75%)">&nbsp;
+ <td style="background:hsl(120, 50%, 75%)">&nbsp;
+ <td style="background:hsl(120, 25%, 75%)">&nbsp;
+ <td style="background:hsl(120, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(120, 100%, 63%)">&nbsp;
+ <td style="background:hsl(120, 75%, 63%)">&nbsp;
+ <td style="background:hsl(120, 50%, 63%)">&nbsp;
+ <td style="background:hsl(120, 25%, 63%)">&nbsp;
+ <td style="background:hsl(120, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(120, 100%, 50%)">&nbsp;
+ <td style="background:hsl(120, 75%, 50%)">&nbsp;
+ <td style="background:hsl(120, 50%, 50%)">&nbsp;
+ <td style="background:hsl(120, 25%, 50%)">&nbsp;
+ <td style="background:hsl(120, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(120, 100%, 38%)">&nbsp;
+ <td style="background:hsl(120, 75%, 38%)">&nbsp;
+ <td style="background:hsl(120, 50%, 38%)">&nbsp;
+ <td style="background:hsl(120, 25%, 38%)">&nbsp;
+ <td style="background:hsl(120, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(120, 100%, 25%)">&nbsp;
+ <td style="background:hsl(120, 75%, 25%)">&nbsp;
+ <td style="background:hsl(120, 50%, 25%)">&nbsp;
+ <td style="background:hsl(120, 25%, 25%)">&nbsp;
+ <td style="background:hsl(120, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(120, 100%, 13%)">&nbsp;
+ <td style="background:hsl(120, 75%, 13%)">&nbsp;
+ <td style="background:hsl(120, 50%, 13%)">&nbsp;
+ <td style="background:hsl(120, 25%, 13%)">&nbsp;
+ <td style="background:hsl(120, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(120, 100%, 0%)">&nbsp;
+ <td style="background:hsl(120, 75%, 0%)">&nbsp;
+ <td style="background:hsl(120, 50%, 0%)">&nbsp;
+ <td style="background:hsl(120, 25%, 0%)">&nbsp;
+ <td style="background:hsl(120, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>150&deg; Green-Cyans (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#BFFFDF">&nbsp;
+
+ <td style="background:#C7F7DF">&nbsp;
+
+ <td style="background:#CFEFDF">&nbsp;
+
+ <td style="background:#D7E7DF">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#80FFBF">&nbsp;
+
+ <td style="background:#8FEFBF">&nbsp;
+
+ <td style="background:#9FDFBF">&nbsp;
+
+ <td style="background:#AFCFBF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#40FF9F">&nbsp;
+
+ <td style="background:#58E79F">&nbsp;
+
+ <td style="background:#70CF9F">&nbsp;
+
+ <td style="background:#87B79F">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#00FF80">&nbsp;
+
+ <td style="background:#20DF80">&nbsp;
+
+ <td style="background:#40BF80">&nbsp;
+
+ <td style="background:#609F80">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#00BF60">&nbsp;
+
+ <td style="background:#18A760">&nbsp;
+
+ <td style="background:#308F60">&nbsp;
+
+ <td style="background:#487860">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#008040">&nbsp;
+
+ <td style="background:#107040">&nbsp;
+
+ <td style="background:#206040">&nbsp;
+
+ <td style="background:#305040">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#004020">&nbsp;
+
+ <td style="background:#083820">&nbsp;
+
+ <td style="background:#103020">&nbsp;
+
+ <td style="background:#182820">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>150&deg; Green-Cyans (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(150, 100%, 100%)">&nbsp;
+ <td style="background:hsl(150, 75%, 100%)">&nbsp;
+ <td style="background:hsl(150, 50%, 100%)">&nbsp;
+ <td style="background:hsl(150, 25%, 100%)">&nbsp;
+ <td style="background:hsl(150, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(150, 100%, 88%)">&nbsp;
+ <td style="background:hsl(150, 75%, 88%)">&nbsp;
+ <td style="background:hsl(150, 50%, 88%)">&nbsp;
+ <td style="background:hsl(150, 25%, 88%)">&nbsp;
+ <td style="background:hsl(150, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(150, 100%, 75%)">&nbsp;
+ <td style="background:hsl(150, 75%, 75%)">&nbsp;
+ <td style="background:hsl(150, 50%, 75%)">&nbsp;
+ <td style="background:hsl(150, 25%, 75%)">&nbsp;
+ <td style="background:hsl(150, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(150, 100%, 63%)">&nbsp;
+ <td style="background:hsl(150, 75%, 63%)">&nbsp;
+ <td style="background:hsl(150, 50%, 63%)">&nbsp;
+ <td style="background:hsl(150, 25%, 63%)">&nbsp;
+ <td style="background:hsl(150, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(150, 100%, 50%)">&nbsp;
+ <td style="background:hsl(150, 75%, 50%)">&nbsp;
+ <td style="background:hsl(150, 50%, 50%)">&nbsp;
+ <td style="background:hsl(150, 25%, 50%)">&nbsp;
+ <td style="background:hsl(150, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(150, 100%, 38%)">&nbsp;
+ <td style="background:hsl(150, 75%, 38%)">&nbsp;
+ <td style="background:hsl(150, 50%, 38%)">&nbsp;
+ <td style="background:hsl(150, 25%, 38%)">&nbsp;
+ <td style="background:hsl(150, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(150, 100%, 25%)">&nbsp;
+ <td style="background:hsl(150, 75%, 25%)">&nbsp;
+ <td style="background:hsl(150, 50%, 25%)">&nbsp;
+ <td style="background:hsl(150, 25%, 25%)">&nbsp;
+ <td style="background:hsl(150, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(150, 100%, 13%)">&nbsp;
+ <td style="background:hsl(150, 75%, 13%)">&nbsp;
+ <td style="background:hsl(150, 50%, 13%)">&nbsp;
+ <td style="background:hsl(150, 25%, 13%)">&nbsp;
+ <td style="background:hsl(150, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(150, 100%, 0%)">&nbsp;
+ <td style="background:hsl(150, 75%, 0%)">&nbsp;
+ <td style="background:hsl(150, 50%, 0%)">&nbsp;
+ <td style="background:hsl(150, 25%, 0%)">&nbsp;
+ <td style="background:hsl(150, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>180&deg; Cyans (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#BFFFFF">&nbsp;
+
+ <td style="background:#C7F7F7">&nbsp;
+
+ <td style="background:#CFEFEF">&nbsp;
+
+ <td style="background:#D7E7E7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#80FFFF">&nbsp;
+
+ <td style="background:#8FEFEF">&nbsp;
+
+ <td style="background:#9FDFDF">&nbsp;
+
+ <td style="background:#AFCFCF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#40FFFF">&nbsp;
+
+ <td style="background:#58E7E7">&nbsp;
+
+ <td style="background:#70CFCF">&nbsp;
+
+ <td style="background:#87B7B7">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#00FFFF">&nbsp;
+
+ <td style="background:#20DFDF">&nbsp;
+
+ <td style="background:#40BFBF">&nbsp;
+
+ <td style="background:#609F9F">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#00BFBF">&nbsp;
+
+ <td style="background:#18A7A7">&nbsp;
+
+ <td style="background:#308F8F">&nbsp;
+
+ <td style="background:#487878">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#008080">&nbsp;
+
+ <td style="background:#107070">&nbsp;
+
+ <td style="background:#206060">&nbsp;
+
+ <td style="background:#305050">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#004040">&nbsp;
+
+ <td style="background:#083838">&nbsp;
+
+ <td style="background:#103030">&nbsp;
+
+ <td style="background:#182828">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>180&deg; Cyans (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(180, 100%, 100%)">&nbsp;
+ <td style="background:hsl(180, 75%, 100%)">&nbsp;
+ <td style="background:hsl(180, 50%, 100%)">&nbsp;
+ <td style="background:hsl(180, 25%, 100%)">&nbsp;
+ <td style="background:hsl(180, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(180, 100%, 88%)">&nbsp;
+ <td style="background:hsl(180, 75%, 88%)">&nbsp;
+ <td style="background:hsl(180, 50%, 88%)">&nbsp;
+ <td style="background:hsl(180, 25%, 88%)">&nbsp;
+ <td style="background:hsl(180, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(180, 100%, 75%)">&nbsp;
+ <td style="background:hsl(180, 75%, 75%)">&nbsp;
+ <td style="background:hsl(180, 50%, 75%)">&nbsp;
+ <td style="background:hsl(180, 25%, 75%)">&nbsp;
+ <td style="background:hsl(180, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(180, 100%, 63%)">&nbsp;
+ <td style="background:hsl(180, 75%, 63%)">&nbsp;
+ <td style="background:hsl(180, 50%, 63%)">&nbsp;
+ <td style="background:hsl(180, 25%, 63%)">&nbsp;
+ <td style="background:hsl(180, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(180, 100%, 50%)">&nbsp;
+ <td style="background:hsl(180, 75%, 50%)">&nbsp;
+ <td style="background:hsl(180, 50%, 50%)">&nbsp;
+ <td style="background:hsl(180, 25%, 50%)">&nbsp;
+ <td style="background:hsl(180, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(180, 100%, 38%)">&nbsp;
+ <td style="background:hsl(180, 75%, 38%)">&nbsp;
+ <td style="background:hsl(180, 50%, 38%)">&nbsp;
+ <td style="background:hsl(180, 25%, 38%)">&nbsp;
+ <td style="background:hsl(180, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(180, 100%, 25%)">&nbsp;
+ <td style="background:hsl(180, 75%, 25%)">&nbsp;
+ <td style="background:hsl(180, 50%, 25%)">&nbsp;
+ <td style="background:hsl(180, 25%, 25%)">&nbsp;
+ <td style="background:hsl(180, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(180, 100%, 13%)">&nbsp;
+ <td style="background:hsl(180, 75%, 13%)">&nbsp;
+ <td style="background:hsl(180, 50%, 13%)">&nbsp;
+ <td style="background:hsl(180, 25%, 13%)">&nbsp;
+ <td style="background:hsl(180, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(180, 100%, 0%)">&nbsp;
+ <td style="background:hsl(180, 75%, 0%)">&nbsp;
+ <td style="background:hsl(180, 50%, 0%)">&nbsp;
+ <td style="background:hsl(180, 25%, 0%)">&nbsp;
+ <td style="background:hsl(180, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>210&deg; Cyan-Blues (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#BFDFFF">&nbsp;
+
+ <td style="background:#C7DFF7">&nbsp;
+
+ <td style="background:#CFDFEF">&nbsp;
+
+ <td style="background:#D7DFE7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#80BFFF">&nbsp;
+
+ <td style="background:#8FBFEF">&nbsp;
+
+ <td style="background:#9FBFDF">&nbsp;
+
+ <td style="background:#AFBFCF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#409FFF">&nbsp;
+
+ <td style="background:#589FE7">&nbsp;
+
+ <td style="background:#709FCF">&nbsp;
+
+ <td style="background:#879FB7">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#0080FF">&nbsp;
+
+ <td style="background:#2080DF">&nbsp;
+
+ <td style="background:#4080BF">&nbsp;
+
+ <td style="background:#60809F">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#0060BF">&nbsp;
+
+ <td style="background:#1860A7">&nbsp;
+
+ <td style="background:#30608F">&nbsp;
+
+ <td style="background:#486078">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#004080">&nbsp;
+
+ <td style="background:#104070">&nbsp;
+
+ <td style="background:#204060">&nbsp;
+
+ <td style="background:#304050">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#002040">&nbsp;
+
+ <td style="background:#082038">&nbsp;
+
+ <td style="background:#102030">&nbsp;
+
+ <td style="background:#182028">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>210&deg; Cyan-Blues (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(210, 100%, 100%)">&nbsp;
+ <td style="background:hsl(210, 75%, 100%)">&nbsp;
+ <td style="background:hsl(210, 50%, 100%)">&nbsp;
+ <td style="background:hsl(210, 25%, 100%)">&nbsp;
+ <td style="background:hsl(210, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(210, 100%, 88%)">&nbsp;
+ <td style="background:hsl(210, 75%, 88%)">&nbsp;
+ <td style="background:hsl(210, 50%, 88%)">&nbsp;
+ <td style="background:hsl(210, 25%, 88%)">&nbsp;
+ <td style="background:hsl(210, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(210, 100%, 75%)">&nbsp;
+ <td style="background:hsl(210, 75%, 75%)">&nbsp;
+ <td style="background:hsl(210, 50%, 75%)">&nbsp;
+ <td style="background:hsl(210, 25%, 75%)">&nbsp;
+ <td style="background:hsl(210, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(210, 100%, 63%)">&nbsp;
+ <td style="background:hsl(210, 75%, 63%)">&nbsp;
+ <td style="background:hsl(210, 50%, 63%)">&nbsp;
+ <td style="background:hsl(210, 25%, 63%)">&nbsp;
+ <td style="background:hsl(210, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(210, 100%, 50%)">&nbsp;
+ <td style="background:hsl(210, 75%, 50%)">&nbsp;
+ <td style="background:hsl(210, 50%, 50%)">&nbsp;
+ <td style="background:hsl(210, 25%, 50%)">&nbsp;
+ <td style="background:hsl(210, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(210, 100%, 38%)">&nbsp;
+ <td style="background:hsl(210, 75%, 38%)">&nbsp;
+ <td style="background:hsl(210, 50%, 38%)">&nbsp;
+ <td style="background:hsl(210, 25%, 38%)">&nbsp;
+ <td style="background:hsl(210, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(210, 100%, 25%)">&nbsp;
+ <td style="background:hsl(210, 75%, 25%)">&nbsp;
+ <td style="background:hsl(210, 50%, 25%)">&nbsp;
+ <td style="background:hsl(210, 25%, 25%)">&nbsp;
+ <td style="background:hsl(210, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(210, 100%, 13%)">&nbsp;
+ <td style="background:hsl(210, 75%, 13%)">&nbsp;
+ <td style="background:hsl(210, 50%, 13%)">&nbsp;
+ <td style="background:hsl(210, 25%, 13%)">&nbsp;
+ <td style="background:hsl(210, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(210, 100%, 0%)">&nbsp;
+ <td style="background:hsl(210, 75%, 0%)">&nbsp;
+ <td style="background:hsl(210, 50%, 0%)">&nbsp;
+ <td style="background:hsl(210, 25%, 0%)">&nbsp;
+ <td style="background:hsl(210, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>240&deg; Blues (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#BFBFFF">&nbsp;
+
+ <td style="background:#C7C7F7">&nbsp;
+
+ <td style="background:#CFCFEF">&nbsp;
+
+ <td style="background:#D7D7E7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#8080FF">&nbsp;
+
+ <td style="background:#8F8FEF">&nbsp;
+
+ <td style="background:#9F9FDF">&nbsp;
+
+ <td style="background:#AFAFCF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#4040FF">&nbsp;
+
+ <td style="background:#5858E7">&nbsp;
+
+ <td style="background:#7070CF">&nbsp;
+
+ <td style="background:#8787B7">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#0000FF">&nbsp;
+
+ <td style="background:#2020DF">&nbsp;
+
+ <td style="background:#4040BF">&nbsp;
+
+ <td style="background:#60609F">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#0000BF">&nbsp;
+
+ <td style="background:#1818A7">&nbsp;
+
+ <td style="background:#30308F">&nbsp;
+
+ <td style="background:#484878">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#000080">&nbsp;
+
+ <td style="background:#101070">&nbsp;
+
+ <td style="background:#202060">&nbsp;
+
+ <td style="background:#303050">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#000040">&nbsp;
+
+ <td style="background:#080838">&nbsp;
+
+ <td style="background:#101030">&nbsp;
+
+ <td style="background:#181828">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>240&deg; Blues (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(240, 100%, 100%)">&nbsp;
+ <td style="background:hsl(240, 75%, 100%)">&nbsp;
+ <td style="background:hsl(240, 50%, 100%)">&nbsp;
+ <td style="background:hsl(240, 25%, 100%)">&nbsp;
+ <td style="background:hsl(240, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(240, 100%, 88%)">&nbsp;
+ <td style="background:hsl(240, 75%, 88%)">&nbsp;
+ <td style="background:hsl(240, 50%, 88%)">&nbsp;
+ <td style="background:hsl(240, 25%, 88%)">&nbsp;
+ <td style="background:hsl(240, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(240, 100%, 75%)">&nbsp;
+ <td style="background:hsl(240, 75%, 75%)">&nbsp;
+ <td style="background:hsl(240, 50%, 75%)">&nbsp;
+ <td style="background:hsl(240, 25%, 75%)">&nbsp;
+ <td style="background:hsl(240, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(240, 100%, 63%)">&nbsp;
+ <td style="background:hsl(240, 75%, 63%)">&nbsp;
+ <td style="background:hsl(240, 50%, 63%)">&nbsp;
+ <td style="background:hsl(240, 25%, 63%)">&nbsp;
+ <td style="background:hsl(240, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(240, 100%, 50%)">&nbsp;
+ <td style="background:hsl(240, 75%, 50%)">&nbsp;
+ <td style="background:hsl(240, 50%, 50%)">&nbsp;
+ <td style="background:hsl(240, 25%, 50%)">&nbsp;
+ <td style="background:hsl(240, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(240, 100%, 38%)">&nbsp;
+ <td style="background:hsl(240, 75%, 38%)">&nbsp;
+ <td style="background:hsl(240, 50%, 38%)">&nbsp;
+ <td style="background:hsl(240, 25%, 38%)">&nbsp;
+ <td style="background:hsl(240, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(240, 100%, 25%)">&nbsp;
+ <td style="background:hsl(240, 75%, 25%)">&nbsp;
+ <td style="background:hsl(240, 50%, 25%)">&nbsp;
+ <td style="background:hsl(240, 25%, 25%)">&nbsp;
+ <td style="background:hsl(240, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(240, 100%, 13%)">&nbsp;
+ <td style="background:hsl(240, 75%, 13%)">&nbsp;
+ <td style="background:hsl(240, 50%, 13%)">&nbsp;
+ <td style="background:hsl(240, 25%, 13%)">&nbsp;
+ <td style="background:hsl(240, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(240, 100%, 0%)">&nbsp;
+ <td style="background:hsl(240, 75%, 0%)">&nbsp;
+ <td style="background:hsl(240, 50%, 0%)">&nbsp;
+ <td style="background:hsl(240, 25%, 0%)">&nbsp;
+ <td style="background:hsl(240, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>270&deg; Blue-Magentas (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#DFBFFF">&nbsp;
+
+ <td style="background:#DFC7F7">&nbsp;
+
+ <td style="background:#DFCFEF">&nbsp;
+
+ <td style="background:#DFD7E7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#BF80FF">&nbsp;
+
+ <td style="background:#BF8FEF">&nbsp;
+
+ <td style="background:#BF9FDF">&nbsp;
+
+ <td style="background:#BFAFCF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#9F40FF">&nbsp;
+
+ <td style="background:#9F58E7">&nbsp;
+
+ <td style="background:#9F70CF">&nbsp;
+
+ <td style="background:#9F87B7">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#8000FF">&nbsp;
+
+ <td style="background:#8020DF">&nbsp;
+
+ <td style="background:#8040BF">&nbsp;
+
+ <td style="background:#80609F">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#6000BF">&nbsp;
+
+ <td style="background:#6018A7">&nbsp;
+
+ <td style="background:#60308F">&nbsp;
+
+ <td style="background:#604878">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#400080">&nbsp;
+
+ <td style="background:#401070">&nbsp;
+
+ <td style="background:#402060">&nbsp;
+
+ <td style="background:#403050">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#200040">&nbsp;
+
+ <td style="background:#200838">&nbsp;
+
+ <td style="background:#201030">&nbsp;
+
+ <td style="background:#201828">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>270&deg; Blue-Magentas (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(270, 100%, 100%)">&nbsp;
+ <td style="background:hsl(270, 75%, 100%)">&nbsp;
+ <td style="background:hsl(270, 50%, 100%)">&nbsp;
+ <td style="background:hsl(270, 25%, 100%)">&nbsp;
+ <td style="background:hsl(270, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(270, 100%, 88%)">&nbsp;
+ <td style="background:hsl(270, 75%, 88%)">&nbsp;
+ <td style="background:hsl(270, 50%, 88%)">&nbsp;
+ <td style="background:hsl(270, 25%, 88%)">&nbsp;
+ <td style="background:hsl(270, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(270, 100%, 75%)">&nbsp;
+ <td style="background:hsl(270, 75%, 75%)">&nbsp;
+ <td style="background:hsl(270, 50%, 75%)">&nbsp;
+ <td style="background:hsl(270, 25%, 75%)">&nbsp;
+ <td style="background:hsl(270, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(270, 100%, 63%)">&nbsp;
+ <td style="background:hsl(270, 75%, 63%)">&nbsp;
+ <td style="background:hsl(270, 50%, 63%)">&nbsp;
+ <td style="background:hsl(270, 25%, 63%)">&nbsp;
+ <td style="background:hsl(270, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(270, 100%, 50%)">&nbsp;
+ <td style="background:hsl(270, 75%, 50%)">&nbsp;
+ <td style="background:hsl(270, 50%, 50%)">&nbsp;
+ <td style="background:hsl(270, 25%, 50%)">&nbsp;
+ <td style="background:hsl(270, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(270, 100%, 38%)">&nbsp;
+ <td style="background:hsl(270, 75%, 38%)">&nbsp;
+ <td style="background:hsl(270, 50%, 38%)">&nbsp;
+ <td style="background:hsl(270, 25%, 38%)">&nbsp;
+ <td style="background:hsl(270, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(270, 100%, 25%)">&nbsp;
+ <td style="background:hsl(270, 75%, 25%)">&nbsp;
+ <td style="background:hsl(270, 50%, 25%)">&nbsp;
+ <td style="background:hsl(270, 25%, 25%)">&nbsp;
+ <td style="background:hsl(270, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(270, 100%, 13%)">&nbsp;
+ <td style="background:hsl(270, 75%, 13%)">&nbsp;
+ <td style="background:hsl(270, 50%, 13%)">&nbsp;
+ <td style="background:hsl(270, 25%, 13%)">&nbsp;
+ <td style="background:hsl(270, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(270, 100%, 0%)">&nbsp;
+ <td style="background:hsl(270, 75%, 0%)">&nbsp;
+ <td style="background:hsl(270, 50%, 0%)">&nbsp;
+ <td style="background:hsl(270, 25%, 0%)">&nbsp;
+ <td style="background:hsl(270, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>300&deg; Magentas (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#FFBFFF">&nbsp;
+
+ <td style="background:#F7C7F7">&nbsp;
+
+ <td style="background:#EFCFEF">&nbsp;
+
+ <td style="background:#E7D7E7">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#FF80FF">&nbsp;
+
+ <td style="background:#EF8FEF">&nbsp;
+
+ <td style="background:#DF9FDF">&nbsp;
+
+ <td style="background:#CFAFCF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#FF40FF">&nbsp;
+
+ <td style="background:#E758E7">&nbsp;
+
+ <td style="background:#CF70CF">&nbsp;
+
+ <td style="background:#B787B7">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#FF00FF">&nbsp;
+
+ <td style="background:#DF20DF">&nbsp;
+
+ <td style="background:#BF40BF">&nbsp;
+
+ <td style="background:#9F609F">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#BF00BF">&nbsp;
+
+ <td style="background:#A718A7">&nbsp;
+
+ <td style="background:#8F308F">&nbsp;
+
+ <td style="background:#784878">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#800080">&nbsp;
+
+ <td style="background:#701070">&nbsp;
+
+ <td style="background:#602060">&nbsp;
+
+ <td style="background:#503050">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#400040">&nbsp;
+
+ <td style="background:#380838">&nbsp;
+
+ <td style="background:#301030">&nbsp;
+
+ <td style="background:#281828">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>300&deg; Magentas (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(300, 100%, 100%)">&nbsp;
+ <td style="background:hsl(300, 75%, 100%)">&nbsp;
+ <td style="background:hsl(300, 50%, 100%)">&nbsp;
+ <td style="background:hsl(300, 25%, 100%)">&nbsp;
+ <td style="background:hsl(300, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(300, 100%, 88%)">&nbsp;
+ <td style="background:hsl(300, 75%, 88%)">&nbsp;
+ <td style="background:hsl(300, 50%, 88%)">&nbsp;
+ <td style="background:hsl(300, 25%, 88%)">&nbsp;
+ <td style="background:hsl(300, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(300, 100%, 75%)">&nbsp;
+ <td style="background:hsl(300, 75%, 75%)">&nbsp;
+ <td style="background:hsl(300, 50%, 75%)">&nbsp;
+ <td style="background:hsl(300, 25%, 75%)">&nbsp;
+ <td style="background:hsl(300, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(300, 100%, 63%)">&nbsp;
+ <td style="background:hsl(300, 75%, 63%)">&nbsp;
+ <td style="background:hsl(300, 50%, 63%)">&nbsp;
+ <td style="background:hsl(300, 25%, 63%)">&nbsp;
+ <td style="background:hsl(300, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(300, 100%, 50%)">&nbsp;
+ <td style="background:hsl(300, 75%, 50%)">&nbsp;
+ <td style="background:hsl(300, 50%, 50%)">&nbsp;
+ <td style="background:hsl(300, 25%, 50%)">&nbsp;
+ <td style="background:hsl(300, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(300, 100%, 38%)">&nbsp;
+ <td style="background:hsl(300, 75%, 38%)">&nbsp;
+ <td style="background:hsl(300, 50%, 38%)">&nbsp;
+ <td style="background:hsl(300, 25%, 38%)">&nbsp;
+ <td style="background:hsl(300, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(300, 100%, 25%)">&nbsp;
+ <td style="background:hsl(300, 75%, 25%)">&nbsp;
+ <td style="background:hsl(300, 50%, 25%)">&nbsp;
+ <td style="background:hsl(300, 25%, 25%)">&nbsp;
+ <td style="background:hsl(300, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(300, 100%, 13%)">&nbsp;
+ <td style="background:hsl(300, 75%, 13%)">&nbsp;
+ <td style="background:hsl(300, 50%, 13%)">&nbsp;
+ <td style="background:hsl(300, 25%, 13%)">&nbsp;
+ <td style="background:hsl(300, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(300, 100%, 0%)">&nbsp;
+ <td style="background:hsl(300, 75%, 0%)">&nbsp;
+ <td style="background:hsl(300, 50%, 0%)">&nbsp;
+ <td style="background:hsl(300, 25%, 0%)">&nbsp;
+ <td style="background:hsl(300, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<tr>
+<td>
+
+ <table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>330&deg; Magenta-Reds (RGB)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <td style="background:#FFFFFF">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:#FFBFDF">&nbsp;
+
+ <td style="background:#F7C7DF">&nbsp;
+
+ <td style="background:#EFCFDF">&nbsp;
+
+ <td style="background:#E7D7DF">&nbsp;
+
+ <td style="background:#DFDFDF">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:#FF80BF">&nbsp;
+
+ <td style="background:#EF8FBF">&nbsp;
+
+ <td style="background:#DF9FBF">&nbsp;
+
+ <td style="background:#CFAFBF">&nbsp;
+
+ <td style="background:#BFBFBF">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:#FF409F">&nbsp;
+
+ <td style="background:#E7589F">&nbsp;
+
+ <td style="background:#CF709F">&nbsp;
+
+ <td style="background:#B7879F">&nbsp;
+
+ <td style="background:#9F9F9F">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:#FF0080">&nbsp;
+
+ <td style="background:#DF2080">&nbsp;
+
+ <td style="background:#BF4080">&nbsp;
+
+ <td style="background:#9F6080">&nbsp;
+
+ <td style="background:#808080">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:#BF0060">&nbsp;
+
+ <td style="background:#A71860">&nbsp;
+
+ <td style="background:#8F3060">&nbsp;
+
+ <td style="background:#784860">&nbsp;
+
+ <td style="background:#606060">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:#800040">&nbsp;
+
+ <td style="background:#701040">&nbsp;
+
+ <td style="background:#602040">&nbsp;
+
+ <td style="background:#503040">&nbsp;
+
+ <td style="background:#404040">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:#400020">&nbsp;
+
+ <td style="background:#380820">&nbsp;
+
+ <td style="background:#301020">&nbsp;
+
+ <td style="background:#281820">&nbsp;
+
+ <td style="background:#202020">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+
+ <td style="background:#000000">&nbsp;
+ </table>
+</td>
+<td>
+
+<table class=hslexample>
+ <tbody>
+ <tr>
+ <th>
+
+ <th colspan=5>330&deg; Magenta-Reds (HSL)
+
+ <tr>
+ <th>
+
+ <th colspan=5>Saturation
+
+ <tr>
+ <th>
+
+ <th>100%
+
+ <th>75%
+
+ <th>50%
+
+ <th>25%
+
+ <th>0%
+
+ <tr>
+ <th> 100
+
+ <td style="background:hsl(330, 100%, 100%)">&nbsp;
+ <td style="background:hsl(330, 75%, 100%)">&nbsp;
+ <td style="background:hsl(330, 50%, 100%)">&nbsp;
+ <td style="background:hsl(330, 25%, 100%)">&nbsp;
+ <td style="background:hsl(330, 0%, 100%)">&nbsp;
+
+ <tr>
+ <th> 88
+
+ <td style="background:hsl(330, 100%, 88%)">&nbsp;
+ <td style="background:hsl(330, 75%, 88%)">&nbsp;
+ <td style="background:hsl(330, 50%, 88%)">&nbsp;
+ <td style="background:hsl(330, 25%, 88%)">&nbsp;
+ <td style="background:hsl(330, 0%, 88%)">&nbsp;
+
+ <tr>
+ <th> 75
+
+ <td style="background:hsl(330, 100%, 75%)">&nbsp;
+ <td style="background:hsl(330, 75%, 75%)">&nbsp;
+ <td style="background:hsl(330, 50%, 75%)">&nbsp;
+ <td style="background:hsl(330, 25%, 75%)">&nbsp;
+ <td style="background:hsl(330, 0%, 75%)">&nbsp;
+
+ <tr>
+ <th> 63
+
+ <td style="background:hsl(330, 100%, 63%)">&nbsp;
+ <td style="background:hsl(330, 75%, 63%)">&nbsp;
+ <td style="background:hsl(330, 50%, 63%)">&nbsp;
+ <td style="background:hsl(330, 25%, 63%)">&nbsp;
+ <td style="background:hsl(330, 0%, 63%)">&nbsp;
+
+ <tr>
+ <th> 50
+
+ <td style="background:hsl(330, 100%, 50%)">&nbsp;
+ <td style="background:hsl(330, 75%, 50%)">&nbsp;
+ <td style="background:hsl(330, 50%, 50%)">&nbsp;
+ <td style="background:hsl(330, 25%, 50%)">&nbsp;
+ <td style="background:hsl(330, 0%, 50%)">&nbsp;
+
+ <tr>
+ <th> 38
+
+ <td style="background:hsl(330, 100%, 38%)">&nbsp;
+ <td style="background:hsl(330, 75%, 38%)">&nbsp;
+ <td style="background:hsl(330, 50%, 38%)">&nbsp;
+ <td style="background:hsl(330, 25%, 38%)">&nbsp;
+ <td style="background:hsl(330, 0%, 38%)">&nbsp;
+
+ <tr>
+ <th> 25
+
+ <td style="background:hsl(330, 100%, 25%)">&nbsp;
+ <td style="background:hsl(330, 75%, 25%)">&nbsp;
+ <td style="background:hsl(330, 50%, 25%)">&nbsp;
+ <td style="background:hsl(330, 25%, 25%)">&nbsp;
+ <td style="background:hsl(330, 0%, 25%)">&nbsp;
+
+ <tr>
+ <th> 13
+
+ <td style="background:hsl(330, 100%, 13%)">&nbsp;
+ <td style="background:hsl(330, 75%, 13%)">&nbsp;
+ <td style="background:hsl(330, 50%, 13%)">&nbsp;
+ <td style="background:hsl(330, 25%, 13%)">&nbsp;
+ <td style="background:hsl(330, 0%, 13%)">&nbsp;
+
+ <tr>
+ <th> 0
+
+ <td style="background:hsl(330, 100%, 0%)">&nbsp;
+ <td style="background:hsl(330, 75%, 0%)">&nbsp;
+ <td style="background:hsl(330, 50%, 0%)">&nbsp;
+ <td style="background:hsl(330, 25%, 0%)">&nbsp;
+ <td style="background:hsl(330, 0%, 0%)">&nbsp;
+ </table>
+
+</td>
+</tr>
+<table>
+
+</body>