web拾色器

说明：此拾色器自己闲来无事随便画的 提供一个思路 大佬勿喷
html：

 <!-- 选择器 -->
    <div class="color-select">
        <div class="color-select-content" id="select_back">
            <div class="color-point"></div>
        </div>
    </div>
    <!-- 色框 -->
    <div class="color-wrap">
        <!-- 颜色 -->
        <div class="color-content" id="color_content">
            <!-- white -->
            <div class="color-content-white"></div>
            <!-- black -->
            <div class="color-content-black"></div>
            <div class="color-content-spider" id="color_spiser"></div>
        </div>
        <!-- 右边色条 -->
        <div class="color-slider-bar" id="coloe_slider_bar">
            <div class="color-slider-bar-back"></div>
            <!-- 滑块控制器 -->
            <div class="color-slider-bar-con" id="slider_bar_con"></div>
        </div>
    </div>

css：

@charset "utf-8";
.color-wrap{
    z-index: 1000;
    position: absolute;
    top: 100px;
    left: 50px;
    padding: 6px;
    box-sizing: content-box;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.color-select{
    position: absolute;
    top: 50px;
    left: 50px;
    padding: 6px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 0;
    cursor: pointer;
    width: 25px;
    height: 25px;
    background-color: white;
}
.color-select-content{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(110,0, 0, 0.5);
}
.color-point{
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border-left: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
    display: inline-block;
    transform: translateY(4px) rotate(-45deg);
}
.color-content{
    position: relative;
    width: 280px;
    height: 180px;
    background: red;
    float: left;
}
.color-content-white{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
}
.color-content-black{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, black, transparent);
}
.color-content-spider{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
}

.res{
    width: 100px;
    height: 100px;
    background: hsl(120,100%,50%);
}

.color-slider-bar{
    width: 12px;
    height: 180px;
    background-color: red;
    float: right;
    margin-left: 8px;
    position: relative;
}

.color-slider-bar-back{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);
}
.color-slider-bar-con{
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0 0 2px rgba(0,0,0,.6);
    z-index: 1;
    width: 100%;
    height: 4px;
    background-color: white;
}

JS：

/**
 * 
 *  rgba转16进制
 * 
 *  */

function hexify(color) {
    var values = color
      .replace(/rgba?\(/, '')
      .replace(/\)/, '')
      .replace(/[\s+]/g, '')
      .split(',');
    var a = parseFloat(values[3] || 1),
        r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
        g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
        b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
    return "#" +
      ("0" + r.toString(16)).slice(-2) +
      ("0" + g.toString(16)).slice(-2) +
      ("0" + b.toString(16)).slice(-2);
  }



  // rgb 转 hls

  function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if (max == min){ 
        h = s = 0; // achromatic
    } else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}
//   var color = hexify('rgba(255,0,0,0)');

//   console.log(color); // #FFFFFF

// 获取dom

let colorWrap = document.querySelector('#color_content'), 
    colorSpide = document.querySelector('#color_spiser'),
    select_back = document.querySelector('#select_back'),
    slider_bar_con = document.querySelector('#slider_bar_con'),
    coloe_slider_bar = document.querySelector('#coloe_slider_bar'),
    hls = [0, '100%', '50%']; 


// console.log(colorWrap, colorSpide);    


//  事件添加

colorWrap.addEventListener('click', function() {
    let e = event || window.event; // event对象
    // 利用父元素位置计算得到position的值
    let top = this.parentNode.offsetTop + this.offsetTop,
        left = this.parentNode.offsetLeft + this.offsetLeft;
        console.log(top, left) // 元素位置

    /**
     * 
     *      获取鼠标位置 移动选择点到鼠标位置
     * 
     * */
    // 获取坐标
    let position = {};
    position.left = e.clientX - left;
    position.top = e.clientY - top;
    //console.log(position);
    // 设置坐标点
    colorSpide.style.left = position.left + 'px';
    colorSpide.style.top = position.top + 'px';
    /**
     * 
     *  计算值
     *  
     *  说明：坐标x轴决定hsl中的饱和度 坐标Y决定rgba中的亮度
     * 
     */
    
    position.x = position.left / this.offsetWidth * 100;
    
    var step = Math.floor(position.x);
    var chazhi = 100 - (step * 0.5);
    position.y = (position.top / this.offsetHeight * chazhi).toFixed(1);

    console.log(position.y, step)
   
    
    // step = step > 10 ? 100 : step;
    // 设置背景色

    let rgba = `hsl(${hls[0]}, ${step}%, ${chazhi - position.y}%)`;

    console.log(rgba);

    select_back.style.backgroundColor = rgba;


})

coloe_slider_bar.addEventListener('click', function(){
    let e = event || window.event; // event对象
     // 利用父元素位置计算得到position的值
    let top = this.parentNode.offsetTop + this.offsetTop;
    console.log(top) // 元素位置
     /**
      *  移动slider-bar
      * 
      */
    let position = {};
    position.top = e.clientY - top;
    // 移动
    slider_bar_con.style.top = position.top + 'px';

    /**
     *  获取颜色
     */
    let height = this.offsetHeight,
        progress = position.top / height * 100;
    // console.log(progress); 

    /**
     *  基数是17， 0和100 都是红色 
     *  这意味着 0 红色 33 绿色  67蓝色 100 红色 其他均为三原色所叠加的颜色
     */

    let red, green, blue, step = 255/17;
    // 根据位置设置颜色
    if(progress < 33) {
        blue = 0;
        red = progress < 17 ? 255 : 255 - step * (progress -17);
        green = progress > 17 ? 255 : 255 - step * (17 - progress);
    } else if(progress > 33 && progress < 67) {
        red = 0;
        green = progress < 50 ? 255 : 255 - step * (progress - 50);
        blue = progress > 50 ? 255 : 255 - step * (17 - (progress - 33 ));
    } else {
        green = 0;
        blue = progress < 83 ? 255 : 255 - step * (progress - 83);
        red = progress > 83 ? 255 : 255 - step * (17 - (progress - 67 ));
    }
    // console.log(red, green, blue);
    colorWrap.style.backgroundColor = `rgba(${red}, ${green}, ${blue})`;
    // rgb 转 hls
    let value = rgbToHsl(red, green, blue);
    hls = [value[0]*360, value[1]*100 + '%', value[2] * 100 + '%'];
    let rgba = `hsl(${hls[0]}, ${hls[1]}, ${hls[2]})`;
    // 设置颜色区背景颜色
    select_back.style.backgroundColor = rgba;
    // 获取拾取点位置
    let style = window.getComputedStyle(colorSpide);
    position.left = (parseInt(style.left) / colorWrap.offsetWidth).toFixed(1) * 100;
    position.right = (parseInt(style.top) / colorWrap.offsetHeight).toFixed(1) * 100;
    
});