如何仅用CSS生成6位十六进制基础色的深浅色调？

当然有纯CSS的巧妙方法！不用JavaScript或预处理器，我们可以利用CSS原生的颜色函数实现动态生成基础色的深浅色调，替代硬编码的颜色值。下面分享两种实用方案：

方案一：使用color-mix()函数（推荐，直观简洁） #

CSS原生的color-mix()函数能轻松混合两种颜色，通过调整混合比例生成基础色的提亮或加深版本。针对你的需求，我们可以混合基础色与白色（生成浅色层）或黑色（生成深色层）：

:root {
  --base-color: #1d5769;
  /* 混合基础色与白色，百分比控制深浅：数值越大，颜色越浅 */
  --layer-01: color-mix(in srgb, var(--base-color), white 70%);
  --layer-02: color-mix(in srgb, var(--base-color), white 80%);
  --layer-03: color-mix(in srgb, var(--base-color), white 90%);
  --layer-04: color-mix(in srgb, var(--base-color), white 95%);
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-01);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 6px var(--base-color), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

<div class="button"></div>

说明： #

• in srgb指定使用SRGB颜色空间，是最常用的颜色混合模式
• 最后一个百分比参数控制白色的占比：比如white 70%表示混合后70%是白色、30%是基础色，数值越高颜色越浅
• 如果需要深色调，只需把white换成black，调整百分比即可（比如black 20%会生成比基础色深20%的颜色）

方案二：HSL变量调整亮度（兼容性更好） #

如果你需要兼容更老的浏览器（不支持color-mix()），可以先把十六进制基础色转换为HSL（色相、饱和度、亮度）数值，再通过调整亮度值生成深浅色调：

首先，把#1d5769转换为HSL：色相_{193°，饱和度}55%，亮度~27%。然后定义对应的变量：

:root {
  --base-color: #1d5769;
  /* 基础色的HSL参数 */
  --h: 193;
  --s: 55%;
  --l: 27%;
  
  /* 通过调整亮度值生成深浅层：亮度越高，颜色越浅 */
  --layer-01: hsl(var(--h), var(--s), calc(var(--l) + 60%));
  --layer-02: hsl(var(--h), var(--s), calc(var(--l) + 65%));
  --layer-03: hsl(var(--h), var(--s), calc(var(--l) + 75%));
  --layer-04: hsl(var(--h), var(--s), calc(var(--l) + 80%));
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-01);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 6px var(--base-color), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

说明： #

• 你可以通过颜色转换工具把十六进制颜色转成HSL数值，这个步骤只需做一次
• 使用calc()调整亮度值（--l），比如calc(var(--l) + 60%)会把基础色的亮度从27%提升到87%，生成浅色
• 如果需要深色，只需做减法：calc(var(--l) - 10%)

兼容性对比 #

• color-mix()：支持Chrome 111+、Firefox 113+、Safari 15.4+，适合现代项目
• HSL变量方案：支持所有支持CSS变量和calc()的浏览器（Chrome 49+、Firefox 31+、Safari 10+），兼容性更广

这两种方案都能实现你想要的「动态调整色调深浅」的效果，不用再硬编码每一层的颜色值啦！

内容的提问来源于stack exchange，提问作者Johan Swanepoel