如何用CSS制作中心白边缘黑渐变的全色相色轮？

问题说明 #

现有代码生成的色轮已接近需求，但存在两个问题：

• 径向渐变从中心到边缘过渡不流畅
• 未实现每个色相从中心全亮白色（HSL L=100%）到边缘纯黑（HSL L=0%）的平滑过渡

修改后代码 #

CSS #

.color-wheel {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 锥形渐变：覆盖所有色相，全饱和度，中等亮度 */
  background: conic-gradient(
    hsl(0deg 100% 50%),
    hsl(30deg 100% 50%),
    hsl(60deg 100% 50%),
    hsl(90deg 100% 50%),
    hsl(120deg 100% 50%),
    hsl(150deg 100% 50%),
    hsl(180deg 100% 50%),
    hsl(210deg 100% 50%),
    hsl(240deg 100% 50%),
    hsl(270deg 100% 50%),
    hsl(300deg 100% 50%),
    hsl(330deg 100% 50%),
    hsl(360deg 100% 50%)
  ),
  /* 径向渐变：从中心白色到边缘黑色，平滑过渡 */
  radial-gradient(circle, hsl(0deg 0% 100%), hsl(0deg 0% 0%));
  /* 混合模式：让亮度渐变叠加到色相渐变上 */
  background-blend-mode: overlay;
}

HTML #

<div class="color-wheel"></div>

关键优化点 #

• 简化径向渐变：去掉手动添加的中间透明色标，直接使用线性过渡的径向渐变，浏览器会自动生成平滑的亮度变化，解决过渡不流畅问题。
• 合并背景并使用混合模式：将锥形色相渐变与径向亮度渐变叠加，通过混合模式实现每个色相从中心全亮白色到边缘纯黑的自然过渡，无需单独使用两个容器。
• 优化锥形渐变：减少色标密度（每30度一个），依然能覆盖完整色相范围，同时让色相过渡更流畅；也可直接使用conic-gradient(from 0deg, hsl(0 100% 50%), hsl(360 100% 50%))，由浏览器自动生成连续色相渐变。

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