practice

　　　　

<html>

<style>
body{background-color:hsl(230,50%,50%);
color:hsl(0,0%,100%);}
</style>
<h1>HSL Color について</h1>
<p>コンピュータにおける colorの表現方法には #16進数 や rgb(10進数) などがありますが, hsl (エイチ・エス・エル) 方式では hue (色相) / saturation (彩度) / lightness (輝度) の3要素で color を決定します.
HSL Color はページ・デザインにおいて, 色の決定に迷った場合に役立ちます. 
色相を最初に決めればあとは彩度と輝度の割合を変えるだけなので, 取り扱いが楽です.
hue (色相) を0°～360°の角度の値で決定し, saturation (彩度) と lightness (輝度) を 0～100% の範囲で決めます.</p>
<table>
<thead>
<tr>
<th rowspan="2"colspan="2">　</th>
<th colspan="5">saturation ( 彩度 )</th>
</tr>
<tr>
<th>100%</th><th>75%</th><th>50%</th><th>25%</th><th>0%</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="12">lightness ( 輝度 )</th>
<th>100%</th>
<td style="background-color:hsl(90,100%,100%);color:hsl(0,100%,0%);">1</td>
<td style="background-color:hsl(90,75%,100%);color:hsl(0,100%,0%);">2</td>
<td style="background-color:hsl(90,50%,100%);color:hsl(0,100%,0%);">3</td>
<td style="background-color:hsl(90,25%,100%);color:hsl(0,100%,0%);">4</td>
<td style="background-color:hsl(90,0%,100%);color:hsl(0,100%,0%);">5</td>
</tr>
<tr>
<th>90%</th>
<td style="background-color:hsl(90,100%,90%);color:hsl(0,100%,0%);">6</td>
<td style="background-color:hsl(90,75%,90%);color:hsl(0,100%,0%);">7</td>
<td style="background-color:hsl(90,50%,90%);color:hsl(0,100%,0%);">8</td>
<td style="background-color:hsl(90,25%,90%);color:hsl(0,100%,0%);">9</td>
<td style="background-color:hsl(90,0%,90%);color:hsl(0,100%,0%);">10</td>
</tr>
<tr>
<tr>
<th>80%</th>
<td style="background-color:hsl(90,100%,80%);color:hsl(0,100%,0%);">11</td>
<td style="background-color:hsl(90,75%,80%);color:hsl(0,100%,0%);">12</td>
<td style="background-color:hsl(90,50%,80%);color:hsl(0,100%,0%);">13</td>
<td style="background-color:hsl(90,25%,80%);color:hsl(0,100%,0%);">14</td>
<td style="background-color:hsl(90,0%,80%);color:hsl(0,100%,0%);">15</td>
</tr>
<tr>
<tr>
<th>70%</th>
<td style="background-color:hsl(90,100%,70%);color:hsl(0,100%,0%);">16</td>
<td style="background-color:hsl(90,75%,70%);color:hsl(0,100%,0%);">17</td>
<td style="background-color:hsl(90,50%,70%);color:hsl(0,100%,0%);">18</td>
<td style="background-color:hsl(90,25%,70%);color:hsl(0,100%,0%);">19</td>
<td style="background-color:hsl(90,0%,70%);color:hsl(0,100%,0%);">20</td>
</tr>
<tr>
<th>60%</th>
<td style="background-color:hsl(90,100%,60%);color:hsl(0,100%,0%);">21</td>
<td style="background-color:hsl(90,75%,60%);color:hsl(0,100%,0%);">22</td>
<td style="background-color:hsl(90,50%,60%);color:hsl(0,100%,0%);">23</td>
<td style="background-color:hsl(90,25%,60%);color:hsl(0,100%,0%);">24</td>
<td style="background-color:hsl(90,0%,60%);color:hsl(0,100%,0%);">25</td>
</tr>
<tr>
<th>50%</th>
<td style="background-color:hsl(90,100%,50%);color:hsl(0,100%,0%);">26</td>
<td style="background-color:hsl(90,75%,50%);color:hsl(0,100%,0%);">27</td>
<td style="background-color:hsl(90,50%,50%);color:hsl(0,100%,0%);">28</td>
<td style="background-color:hsl(90,25%,50%);color:hsl(0,0%,100%);">29</td>
<td style="background-color:hsl(90,0%,50%);color:hsl(0,0%,100%);">30</td>
</tr>
<tr>
<th>40%</th>
<td style="background-color:hsl(90,100%,40%);">31</td>
<td style="background-color:hsl(90,75%,40%);">32</td>
<td style="background-color:hsl(90,50%,40%);">33</td>
<td style="background-color:hsl(90,25%,40%);">34</td>
<td style="background-color:hsl(90,0%,40%);">35</td>
</tr>
<tr>
<th>30%</th>
<td style="background-color:hsl(90,100%,30%);">36</td>
<td style="background-color:hsl(90,75%,30%);">37</td>
<td style="background-color:hsl(90,50%,30%);">38</td>
<td style="background-color:hsl(90,25%,30%);">39</td>
<td style="background-color:hsl(90,0%,30%);">40</td>
</tr>
<tr>
<th>20%</th>
<td style="background-color:hsl(90,100%,20%);">41</td>
<td style="background-color:hsl(90,75%,20%);">42</td>
<td style="background-color:hsl(90,50%,20%);">43</td>
<td style="background-color:hsl(90,25%,20%);">44</td>
<td style="background-color:hsl(90,0%,20%);">45</td>
</tr>
<tr>
<th>0%</th>
<td style="background-color:hsl(90,100%,0%);">46</td>
<td style="background-color:hsl(90,75%,0%);">47</td>
<td style="background-color:hsl(90,50%,0%);">48</td>
<td style="background-color:hsl(90,25%,0%);">49</td>
<td style="background-color:hsl(90,0%,0%);">50</td>
</tr>
</tbody>
</table>
<p><img src="hsl_color.png"width="300"></p>

</html>