CSSのHSLで色指定すると統一感のある色表現が簡単にできる

2020年12月8日CSS

HSLで色指定すると、とても簡単に統一感のある色表現を実現できます。
具体的な例とそのやり方をみていきましょう。

HSL色指定を使って統一感を出すCSSテクニック

バックグラウンドの背景色は、

body {
  background: hsl(100, 40%, 95%);
}

h1, p {
  color: hsl(100, 35%, 55%);
}

など、背景色とテキストの色の色相を同じにして
彩度と明度をテキストで下げてあげれば統一感がでて見やすくなります。
ボタンは文字よりも濃くすると見やすいので、

.btn {
  color: #fff;
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  background: hsl(100, 50%, 50%);
}

などがいいでしょう。
色相を真反対にしたいなら、calc関数を使って60程度足してあげるといいです。
あとは好みで調整してみましょう。

参考例

<body>
  <h1>タイトル</h1>
  <p>HSLで色指定すると、とても簡単に統一感のある色表現を実現できます。</p>
  <div class="btn">OK</div>
</body>
:root {
  /* --my-hue: 100; */
  /* --my-hue: 200; */
  --my-hue: 50;
}

body {
  background: hsl(var(--my-hue), 40%, 95%);
}

h1, p {
  color: hsl(var(--my-hue), 35%, 55%);
}

.btn {
  color: #fff;
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  /* background: hsl(var(--my-hue), 50%, 50%); */
  /* background: hsl(calc(var(--my-hue) + 180), 50%, 50%); */
  background: hsl(calc(var(--my-hue) + 60), 50%, 50%);
}

CSS

Posted by devsakaso