Tbpgr Blog

元エンジニア 人事 tbpgr(てぃーびー) のブログ

デザイン | ティントとシェード(Tint & Shade)

概要

ティントとシェード(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>
画像