<!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>
