带有纯CSS的色调调色板

Question

我不知道如何用纯css实现这个设计系统。谁能指导我使用什么 css 功能？

这是关于增加/减少 hsl 功能的亮度吗？我第一次做这种事情，所以请建议我最佳实践方法。

Answer 1

您可以使用 css 变量为每个单元格指定

--l

值。在示例中，我画了一个黄蓝色调色板：

.tonal {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  height: 100px;
  background: #fff;
}

.tonal div {
  position: relative;
}

.tonal div:before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--h), var(--s), var(--l));
}

.tonal div:after {
  content: attr(data-value);
  padding: 8px;
  text-align: center;
  display: block;
  color: #fff;
  mix-blend-mode: difference;
}

<div class="tonal" style="--h:210; --s:100%;">
  <div style="--l:0%" data-value="0"></div>
  <div style="--l:10%" data-value="10"></div>
  <div style="--l:20%" data-value="20"></div>
  <div style="--l:30%" data-value="30"></div>
  <div style="--l:40%" data-value="40"></div>
  <div style="--l:50%" data-value="50"></div>
  <div style="--l:60%" data-value="60"></div>
  <div style="--l:70%" data-value="70"></div>
  <div style="--l:80%" data-value="80"></div>
  <div style="--l:90%" data-value="90"></div>
  <div style="--l:95%" data-value="95"></div>
  <div style="--l:99%" data-value="99"></div>
  <div style="--l:100%" data-value="100"></div>
</div>
<div class="tonal" style="--h:60; --s:100%;">
  <div style="--l:0%" data-value="0"></div>
  <div style="--l:10%" data-value="10"></div>
  <div style="--l:20%" data-value="20"></div>
  <div style="--l:30%" data-value="30"></div>
  <div style="--l:40%" data-value="40"></div>
  <div style="--l:50%" data-value="50"></div>
  <div style="--l:60%" data-value="60"></div>
  <div style="--l:70%" data-value="70"></div>
  <div style="--l:80%" data-value="80"></div>
  <div style="--l:90%" data-value="90"></div>
  <div style="--l:95%" data-value="95"></div>
  <div style="--l:99%" data-value="99"></div>
  <div style="--l:100%" data-value="100"></div>
</div>