不用框架，复刻一个VS Code的调色板

我是正在努力学习前端的Mancuoj，欢迎关注互相交流！

前言

那天在codepen看到了别人做的color picker就突发奇想自己复刻一个VS Code的调色板，我也是刚开始学前端嘛，看见啥都想试着写一个。

说干就干，花了几个小时写了一个，bug贼多，就是一个想法，也懒得改了，菜鸡一个，大佬勿喷。

我们先来看看原版长啥样（颜色过多的话gif会失真，大概看看）：

可以看到上方用来显示颜色和色值，点击可以切换三种色彩显示方式，分别是rgba，hsla和hex8；然后下方左侧一个色谱来选择颜色，右侧两个滑块选择透明度和色相。

右上角的显示原来的颜色和最下方的文字提示这次就先不写了🙈

然后看看我几个小时复刻的结果（在线预览）：

HTML+CSS

HTML没啥好说的，就div套div。

我大概画了一下整体布局：

透明背景

这背景的黑白格子上来就给我整蒙了，还得是万能的搜索啊，最后用线性渐变解决了：

background: linear-gradient(
                45deg, 
                rgba(0, 0, 0, 0.4) 25%, 
                transparent 25%, 
                transparent 75%, 
                rgba(0, 0, 0, 0.4) 75%, 
                rgba(0, 0, 0, 0.4)
                ),
            linear-gradient(
                45deg, 
                rgba(0, 0, 0, 0.4) 25%, 
                transparent 25%, 
                transparent 75%, 
                rgba(0, 0, 0, 0.4) 75%, 
                rgba(0, 0, 0, 0.4)
            );
background-size: 10px 10px;
background-position: 0 0, 5px 5px;

下半部分

透明度和色相选择部分都用线性渐变解决：

// 透明度
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

// 色相
background: linear-gradient(to bottom,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
);

滑块左右要各超出去1px：

.slide {
   
    width: 27px;
    height: 5px;
    border: 1px solid #eee;
    position: absolute;