<body>
  <h1>【CSS初心者】色の表現方法をまとめてみた</h1>
  <p>CSSを学んでいて、レイアウトの組み方は見えてきたものの、なぜだかいい感じに仕上がらないと悩んでいる方。<br>一度ここで色の表現方法を総復習してみませんか。</p>
  <div class="btn">
    <a href="https://www.fuwafuwa-af.com/css-color/" target="blank">詳しくはこちら</a>
  </div>
</body>
body {
  --fooColor:300;
  background: hsl(var(--fooColor), 35%, 90%);
}

h1, p {
  color: hsl(var(--fooColor),40%, 50%);
}

.btn {
  width: 150px;
  padding: 8px;
  margin: 0 auto;
  border-radius: 8px;
  text-align: center;
  background: hsl(var(--fooColor), 45%, 45%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.