纯CSS实现 hsl 饱和度明度方块

图片编辑器中若要实现一个可视化的 hsl 颜色拾取方块，可参考 Affinity Designer 的 HSL 颜色模型拾色器：

实现

利用 css background-blend-mode 的 saturation 模式和 luminosity 模式，可以分别实现不同值的叠加：

width: 400rpx;
height: 400rpx;
background-color: hsl(0, 100, 50);
background-color: hsl(0, 100%, 50%);
background-image:
    linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsl(0, 100%, 50%) 100%),
    linear-gradient(to top, hsl(0, 0%, 0%) 0%, hsl(0, 0%, 100%) 100%);
background-blend-mode: saturation, luminosity;

效果如下：

配合动态修改的 background-color hue 值，即可实现不同 hue 值的拾色器。

参考

CSS 背景混合模式