diff options
author | Michael Drake <michael.drake@codethink.co.uk> | 2019-02-16 14:39:10 +0000 |
---|---|---|
committer | Michael Drake <michael.drake@codethink.co.uk> | 2019-02-16 14:39:10 +0000 |
commit | 48553ee9ba7723d46c10fdc7705e3b79e328d384 (patch) | |
tree | d066fa82cc308b57c5d00f3dd0538969d5a028a2 /legacy/other/colour/huetest.html | |
parent | ff7f36cc9ef5f8ec8b97bcce543f966e726389bb (diff) | |
download | netsurf-test-48553ee9ba7723d46c10fdc7705e3b79e328d384.tar.gz netsurf-test-48553ee9ba7723d46c10fdc7705e3b79e328d384.tar.bz2 |
legacy tests: Move all the old tests to a legacy directory.
These are from the old days of ad-hoc manual testing.
There is nothing to indicate correct behaviour for these files without
viewing the source, or comparing with another browser.
Diffstat (limited to 'legacy/other/colour/huetest.html')
-rw-r--r-- | legacy/other/colour/huetest.html | 3071 |
1 files changed, 3071 insertions, 0 deletions
diff --git a/legacy/other/colour/huetest.html b/legacy/other/colour/huetest.html new file mode 100644 index 0000000..c803356 --- /dev/null +++ b/legacy/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> |