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