纯 html+css 实现环形色相图

最近需要实现一个 hsl 取色器，需要有一个环形的色相取色板。

先来看看最终效果

实现

直接使用 css3 的 conic-gradient 进行实现环形渐变，再用伪元素遮住中间部分即可：

.color {
            height: 360px;
            width: 360px;
            background: conic-gradient(from 90deg, hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%), hsl(360, 100%, 50%));
            border-radius: 50%;
            position: relative;
        }

        .color::after {
            content: "";
            display: block;
            width: 50%;
            height: 50%;
            border-radius: 50%;
            background-color: #fff;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

conic-gradient 属性说明

兼容性

2022年微信小程序已兼容，浏览器兼容性可以查看 MDN。