<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HSLA制作配色表</title> <style> .table-wrap { width: 400px; margin: 10px; float: left; } table { width: 400px; border: 1px solid #756c6c; border-left: none; border-collapse: collapse; border-spacing: 0; } th, td { border-top: 1px solid #756c6c; border-left: 1px solid #756c6c; padding: 10px; text-align: center; vertical-align: middle; } /*h=0 s=50% l=50%*/ tbody tr:nth-child(1) td:nth-of-type(1) { background: hsla(0, 50%, 50%, 1); } tbody tr:nth-child(1) td:nth-of-type(2) { background: hsla(0, 50%, 50%, .8); } tbody tr:nth-child(1) td:nth-of-type(3) { background: hsla(0, 50%, 50%, .6); } tbody tr:nth-child(1) td:nth-of-type(4) { background: hsla(0, 50%, 50%, .4); } tbody tr:nth-child(1) td:nth-of-type(5) { background: hsla(0, 50%, 50%, .2); } tbody tr:nth-child(1) td:nth-of-type(6) { background: hsla(0, 50%, 50%, 0); } /*h=60 s=50% l=50%*/ tbody tr:nth-child(2) td:nth-of-type(1) { background: hsla(60, 50%, 50%, 1); } tbody tr:nth-child(2) td:nth-of-type(2) { background: hsla(60, 50%, 50%, .8); } tbody tr:nth-child(2) td:nth-of-type(3) { background: hsla(60, 50%, 50%, .6); } tbody tr:nth-child(2) td:nth-of-type(4) { background: hsla(60, 50%, 50%, .4); } tbody tr:nth-child(2) td:nth-of-type(5) { background: hsla(60, 50%, 50%, .2); } tbody tr:nth-child(2) td:nth-of-type(6) { background: hsla(60, 50%, 50%, 0); } /*h=120 s=50% l=50%*/ tbody tr:nth-child(3) td:nth-of-type(1) { background: hsla(120, 50%, 50%, 1); } tbody tr:nth-child(3) td:nth-of-type(2) { background: hsla(120, 50%, 50%, .8); } tbody tr:nth-child(3) td:nth-of-type(3) { background: hsla(120, 50%, 50%, .6); } tbody tr:nth-child(3) td:nth-of-type(4) { background: hsla(120, 50%, 50%, .4); } tbody tr:nth-child(3) td:nth-of-type(5) { background: hsla(120, 50%, 50%, .2); } tbody tr:nth-child(3) td:nth-of-type(6) { background: hsla(120, 50%, 50%, 0); } /*h=180 s=50% l=50%*/ tbody tr:nth-child(4) td:nth-of-type(1) { background: hsla(180, 50%, 50%, 1); } tbody tr:nth-child(4) td:nth-of-type(2) { background: hsla(180, 50%, 50%, .8); } tbody tr:nth-child(4) td:nth-of-type(3) { background: hsla(180, 50%, 50%, .6); } tbody tr:nth-child(4) td:nth-of-type(4) { background: hsla(180, 50%, 50%, .4); } tbody tr:nth-child(4) td:nth-of-type(5) { background: hsla(180, 50%, 50%, .2); } tbody tr:nth-child(4) td:nth-of-type(6) { background: hsla(180, 50%, 50%, 0); } /*h=240 s=50% l=50%*/ tbody tr:nth-child(5) td:nth-of-type(1) { background: hsla(240, 50%, 50%, 1); } tbody tr:nth-child(5) td:nth-of-type(2) { background: hsla(240, 50%, 50%, .8); } tbody tr:nth-child(5) td:nth-of-type(3) { background: hsla(240, 50%, 50%, .6); } tbody tr:nth-child(5) td:nth-of-type(4) { background: hsla(240, 50%, 50%, .4); } tbody tr:nth-child(5) td:nth-of-type(5) { background: hsla(240, 50%, 50%, .2); } tbody tr:nth-child(5) td:nth-of-type(6) { background: hsla(240, 50%, 50%, 0); } /*h=300 s=50% l=50%*/ tbody tr:nth-child(6) td:nth-of-type(1) { background: hsla(300, 50%, 50%, 1); } tbody tr:nth-child(6) td:nth-of-type(2) { background: hsla(300, 50%, 50%, .8); } tbody tr:nth-child(6) td:nth-of-type(3) { background: hsla(300, 50%, 50%, .6); } tbody tr:nth-child(6) td:nth-of-type(4) { background: hsla(300, 50%, 50%, .4); } tbody tr:nth-child(6) td:nth-of-type(5) { background: hsla(300, 50%, 50%, .2); } tbody tr:nth-child(6) td:nth-of-type(6) { background: hsla(300, 50%, 50%, 0); } /*h=360 s=50% l=50%*/ tbody tr:nth-child(7) td:nth-of-type(1) { background: hsla(360, 50%, 50%, 1); } tbody tr:nth-child(7) td:nth-of-type(2) { background: hsla(360, 50%, 50%, .8); } tbody tr:nth-child(7) td:nth-of-type(3) { background: hsla(360, 50%, 50%, .6); } tbody tr:nth-child(7) td:nth-of-type(4) { background: hsla(360, 50%, 50%, .4); } tbody tr:nth-child(7) td:nth-of-type(5) { background: hsla(360, 50%, 50%, .2); } tbody tr:nth-child(7) td:nth-of-type(6) { background: hsla(360, 50%, 50%, 0); } </style> </head> <body> <table> <caption>HSLA制作透明过渡色块</caption> <thead> <tr> <th colspan="7">透明度</th> </tr> <tr> <th>色度</th> <th>1</th> <th>0.8</th> <th>0.6</th> <th>0.4</th> <th>0.2</th> <th>0</th> </tr> </thead> <tbody> <tr> <th>0</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>60</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>120</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>180</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>240</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>300</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>360</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
