使用HSL

HTML

<table class="hslexample">
    <tbody>
        <tr>
            <th> </th>
            <th colspan="5">色相：H=0 Red </th>
        </tr>
        <tr>
            <th> </th>
            <th colspan="5">饱和度 (→)</th>
        </tr>
        <tr>
            <th>亮度 (↓)</th>
            <th>100% </th>
            <th>75% </th>
            <th>50% </th>
            <th>25% </th>
            <th>0% </th>
        </tr>
        <tr>
            <th>100 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>88 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>75 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>63 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>50 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>38 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>25 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>13 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <th>0 </th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>
					    

CSS

table{ 
    border:solid1pxred;
    background:#eee;
    padding:6px;
}
th{
    color:red;
    font-size:12px;
    font-weight:normal;
}
td{
    width:80px;
    height:30px;
}
/*第1行*/
tr:nth-child(4) td:nth-of-type(1){background:hsl(0,100%,100%);}/*第1列*/
tr:nth-child(4) td:nth-of-type(2){background:hsl(0,75%,100%);}/*第2列*/
tr:nth-child(4) td:nth-of-type(3){background:hsl(0,50%,100%);}/*第3列*/
tr:nth-child(4) td:nth-of-type(4){background:hsl(0,25%,100%);}/*第4列*/
tr:nth-child(4) td:nth-of-type(5){background:hsl(0,0%,100%);}/*第5列*/
/*第2行*/
tr:nth-child(5) td:nth-of-type(1){background:hsl(0,100%,88%);}/*第1列*/
tr:nth-child(5) td:nth-of-type(2){background:hsl(0,75%,88%);}/*第2列*/
tr:nth-child(5) td:nth-of-type(3){background:hsl(0,50%,88%);}/*第3列*/
tr:nth-child(5) td:nth-of-type(4){background:hsl(0,25%,88%);}/*第4列*/
tr:nth-child(5) td:nth-of-type(5){background:hsl(0,0%,88%);}/*第5列*/
/*第3行*/
tr:nth-child(6) td:nth-of-type(1){background:hsl(0,100%,75%);}/*第1列*/
tr:nth-child(6) td:nth-of-type(2){background:hsl(0,75%,75%);}/*第2列*/
tr:nth-child(6) td:nth-of-type(3){background:hsl(0,50%,75%);}/*第3列*/
tr:nth-child(6) td:nth-of-type(4){background:hsl(0,25%,75%);}/*第4列*/
tr:nth-child(6) td:nth-of-type(5){background:hsl(0,0%,75%);}/*第5列*/
/*第4行*/
tr:nth-child(7) td:nth-of-type(1){background:hsl(0,100%,63%);}/*第1列*/
tr:nth-child(7) td:nth-of-type(2){background:hsl(0,75%,63%);}/*第2列*/
tr:nth-child(7) td:nth-of-type(3){background:hsl(0,50%,63%);}/*第3列*/
tr:nth-child(7) td:nth-of-type(4){background:hsl(0,25%,63%);}/*第4列*/
tr:nth-child(7) td:nth-of-type(5){background:hsl(0,0%,63%);}/*第5列*/
/*第5行*/
tr:nth-child(8) td:nth-of-type(1){background:hsl(0,100%,50%);}/*第1列*/
tr:nth-child(8) td:nth-of-type(2){background:hsl(0,75%,50%);}/*第2列*/
tr:nth-child(8) td:nth-of-type(3){background:hsl(0,50%,50%);}/*第3列*/
tr:nth-child(8) td:nth-of-type(4){background:hsl(0,25%,50%);}/*第4列*/
tr:nth-child(8) td:nth-of-type(5){background:hsl(0,0%,50%);}/*第5列*/
/*第6行*/
tr:nth-child(9) td:nth-of-type(1){background:hsl(0,100%,38%);}/*第1列*/
tr:nth-child(9) td:nth-of-type(2){background:hsl(0,75%,38%);}/*第2列*/
tr:nth-child(9) td:nth-of-type(3){background:hsl(0,50%,38%);}/*第3列*/
tr:nth-child(9) td:nth-of-type(4){background:hsl(0,25%,38%);}/*第4列*/
tr:nth-child(9) td:nth-of-type(5){background:hsl(0,0%,38%);}/*第5列*/
/*第7行*/
tr:nth-child(10) td:nth-of-type(1){background:hsl(0,100%,25%);}/*第1列*/
tr:nth-child(10) td:nth-of-type(2){background:hsl(0,75%,25%);}/*第2列*/
tr:nth-child(10) td:nth-of-type(3){background:hsl(0,50%,25%);}/*第3列*/
tr:nth-child(10) td:nth-of-type(4){background:hsl(0,25%,25%);}/*第4列*/
tr:nth-child(10) td:nth-of-type(5){background:hsl(0,0%,25%);}/*第5列*/
/*第8行*/
tr:nth-child(11) td:nth-of-type(1){background:hsl(0,100%,13%);}/*第1列*/
tr:nth-child(11) td:nth-of-type(2){background:hsl(0,75%,13%);}/*第2列*/
tr:nth-child(11) td:nth-of-type(3){background:hsl(0,50%,13%);}/*第3列*/
tr:nth-child(11) td:nth-of-type(4){background:hsl(0,25%,13%);}/*第4列*/
tr:nth-child(11) td:nth-of-type(5){background:hsl(0,0%,13%);}/*第5列*/
/*第9行*/
tr:nth-child(12) td:nth-of-type(1){background:hsl(0,100%,0%);}/*第1列*/
tr:nth-child(12) td:nth-of-type(2){background:hsl(0,75%,0%);}/*第2列*/
tr:nth-child(12) td:nth-of-type(3){background:hsl(0,50%,0%);}/*第3列*/
tr:nth-child(12) td:nth-of-type(4){background:hsl(0,25%,0%);}/*第4列*/
tr:nth-child(12) td:nth-of-type(5){background:hsl(0,0%,0%);}/*第5列*/