概要
ティントとシェード（Tint & Shade）
詳細
ティント
明清色。純色に白を混ぜた色。
シェード
暗清色。純色に黒を混ぜた色。
サンプル
hsl指定で明度50、輝度100が純色。
明度を減らすと明清色。
輝度を減らすと暗清色。
html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(90,50%,50%); } tr.even td { background-color:hsl(270,50%,75%); } tr.odd td { background-color:hsl(270,75%,90%); } </style> </head> <body style="background-color:hsl(270,50%,100%);"> <div style="background-color:hsl(270,50%,75%);"><h1>Title</h1></div> <div style="background-color:hsl(270,75%,75%);"><h2>Summary</h2></div> <table width="500px"> <tr><th>red</th></tr> <tr><td style="background-color:hsl(0,100%,50%);">赤(red)純色</td></tr> <tr><td style="background-color:hsl(0,100%,75%);">赤(red)明清色</td></tr> <tr><td style="background-color:hsl(0,100%,25%);">赤(red)暗清色</td></tr> </table> <hr> <table width="500px"> <tr><th>chartreuse</th></tr> <tr><td style="background-color:hsl(90,100%,50%);">黄緑色(chartreuse)純色</td></tr> <tr><td style="background-color:hsl(90,100%,75%);">黄緑色(chartreuse)明清色</td></tr> <tr><td style="background-color:hsl(90,100%,25%);">黄緑色(chartreuse)暗清色</td></tr> </table> <hr> <table width="500px"> <tr><th>blue</th></tr> <tr><td style="background-color:hsl(240,100%,50%);">青色(blue)純色</td></tr> <tr><td style="background-color:hsl(240,100%,75%);">青色(blue)明清色</td></tr> <tr><td style="background-color:hsl(240,100%,25%);">青色(blue)暗清色</td></tr> </table> </body> </html>
画像
