Using CSS3 and JavaScript to develop web color picker example code

<div class="color_container">
  <div class="main_wrap"> <!--Color picking area-->
    <div class="main_drag" id="mainDrag"></div>
    <div class="main_con" id="mainCon">
      <div class="left_white_bg bg"></div>
      <div class="bottom_black_bg bg"></div>
    </div>
  </div>
  <div class="side_wrap"> <!--Color area-->
    <div class="side_drag" id="sideDrag"></div>
    <div class="side_con" id="sideCon"></div>
  </div>
  <div class="show_color" id="findColor"><!--Display area-->
    <div class="color_full" id="colorFull"></div>
    <div class="color_text" id="colorText">
      R:<input type="text" readonly>
      G:<input type="text" readonly>
      B:<input type="text" readonly>
    </div>
  </div>
</div>

.color_container {width:610px;background:#333;padding:10px;font-size:0;margin:30px auto;}
.color_container>div{display:inline-block;background:#fff;vertical-align:top;box-shadow:0px 0px 5px 0px #999;}
.color_container .main_con{width:550px;height:430px;}
.color_container .main_con .bg{position:absolute;top:0;right:0;bottom:0;left:0;}

.color_container .side_con{width:50px;height:430px;}
.color_container .main_wrap, .color_container .side_wrap{position:relative;}
.color_container .side_wrap{margin-left:10px;}
.color_container .main_drag,.color_container .side_drag{position:absolute;border:1px solid #fff;background:rgba(0,0,0,.3);cursor:pointer;}
.color_container .main_drag{width:12px;height:12px;border-radius:50%;z-index:3;left:-7px;top:-7px;}
.color_container .side_drag{height:6px;width:54px;border-radius:2px;left:-3px;top:-4px;}
.color_container .find_color{width:60px;height:60px;position:absolute;top:0;left:-70px;background:#fff;}
.color_container .show_color{display:block;margin:10px 0 0;height:auto;padding:10px;}
.color_container .color_full{display:inline-block;width:58px;height:58px;border:1px solid #ccc;}
.color_container .color_text{display:inline-block;margin-left:30px;height:60px;line-height:60px;text-align:center;font-size:14px;vertical-align:top;}
.color_container .color_text input{width:24px;margin:0 15px 0 5px;}

.color_container .side_con{background:linear-gradient(to bottom,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)}

.color_container .main_con{background:red;}

.color_container .main_con .left_white_bg{background:linear-gradient(to right,#fff 0%,transparent 100%)}
.color_container .main_con .bottom_black_bg{background:linear-gradient(to bottom,transparent 0%,#000 100%);}

//Color series storage data var aColorSeries = {
  r:[255],g:[0],b:[0]
}
//Color data changes var aColorVary = ['g','r','b','g','r','b'];
//Color series elements var eSeries = document.getElementById('sideCon');
//Number of color changes for each color system var nSeriesLen = Math.floor(eSeries.offsetHeight / 6);
//Change the step value each time var nStep = Math.floor(255 / nSeriesLen);
// Step value remaining value var nStepRemainder = 255 / nSeriesLen - nStep;
//Loop to store color system rgb color values ​​for(let i=0;i<aColorVary.length;i++){
  let add = (i % 2); //Because the height cannot be divided evenly, the final color system needs to be filled with elements let nFull = 0; //Calculate the remaining step value for(let j=0;j<nSeriesLen+add;j++){
    nFull += nStepRemainder;
    let nAddStep = nStep;
    if(nFull>1){ //When the remaining step value exceeds 1, increase the step value by 1 each time
      nAddStep = nStep + 1;
      nFull = nFull - 1;
    }
    //Traverse the color series data object to add color values ​​for(let k in aColorSeries){
      let nVal = 0;
      let nOldVal = aColorSeries[k][aColorSeries[k].length-1];
      if(k==aColorVary[i]){
        if(add==0){ //Judge whether the color value changes direction to increase or decrease nVal = nOldVal + nAddStep;
        }else{
          nVal = nOldVal - nAddStep;
        }
        if(nVal > 255){ //Limit the maximum value to 255
          nVal = 255;
        }else if(nVal < 0){ //Limit the minimum value to 0
          nVal = 0;
        }
      }else{
        nVal = nOldVal;
      }
      aColorSeries[k].push(nVal);
    }
  }
}

 Copy code
 The code is as follows:
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

//Color element binding click event eSeries.addEventListener('click',function(event){
  //Get the click position let nY = event.offsetY - nSideDragH/2;
  //Add transition style to make the straw have sliding effect eSideDrag.style.transition = '.1s';
  //Delete transition style setTimeout(e=>{
    eSideDrag.style.transition = 'inherit';
  },100)
  //Change the color straw position eSideDrag.style.top = nY + 'px';
  
  //Modify the background color of the color picking area let n = nY + nSideDragH / 2;
  color = {r:aColorSeries.r[n],g:aColorSeries.g[n],b:aColorSeries.b[n]};
  eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`;
});

//Color of the color picking area var aColorMainStore = [];
//Get the width and height of the color picking area var nMainW = eMainCon.offsetWidth;
var nMainH = eMainCon.offsetHeight;

function fnColorSet(color){
  //Reset the color data of the color picking area aColorMainStore = [];

  //The left side can be changed to white by default var oLeftColor = {r:255,g:255,b:255};
  //The right side has variable color. Since the color parameter is a string, it needs to be converted to an array var oRightColor = JSON.parse(JSON.stringify(color));
  //The bottom color is fixed to black var oBottomColor = {r:0,g:0,b:0};
  //Because the color of the color block starts from the upper left corner, the default setting is white var oMainColor = {r:255,g:255,b:255};
  //Y-axis step value var oYStep = {
    lStep: Math.floor(256 / nMainH), //The left side is gradually changing from white to black from top to bottom, so the fixed step value is calculated lRemainder: 256 / nMainH - Math.floor(256 / nMainH), //The remaining value of the left step lAdd:0, //Additional value in the gradient process}
  //Enumerate and add the right side gradient step value from bottom to bottom, the remaining value and the added value for(let k in oRightColor){
    oYStep[k+'Step'] = Math.floor((oRightColor[k]-oBottomColor[k]+1) / nMainH);
    oYStep[k+'Remainder'] = (oRightColor[k]-oBottomColor[k]+1) / nMainH - Math.floor((oRightColor[k]-oBottomColor[k]+1) / nMainH);
    oYStep[k+'Add'] = 0;
  }

  //Loop each row of color blocks for(let i=0;i<nMainH;i++){
    //Because the color of each column is gradually darker as it goes down, the left and right colors need to be modified for each row except the first row if(i>0){
      oYStep.lAdd += oYStep.lRemainder;
      for(let k in oLeftColor){
        //Modify the left color if(oYStep.lAdd>1){
          oLeftColor[k] = oLeftColor[k] - (oYStep.lStep + 1);
        }else{
          oLeftColor[k] = oLeftColor[k] - oYStep.lStep;
        }
        //Modify the right color oYStep[k+'Add'] += oYStep[k+'Remainder'];
        if(oYStep[k+'Add']>1){
          oRightColor[k] = oRightColor[k] - (oYStep[k+'Step'] + 1);
          //Modify the added value oYStep[k+'Add'] = oYStep[k+'Add'] - 1;
        }else{
          oRightColor[k] = oRightColor[k] - oYStep[k+'Step'];
        }
      }
      //Modify the added value if(oYStep.lAdd>1){
        oYStep.lAdd = oYStep.lAdd - 1;
      }
    }
    
    //The color of each row of color blocks is stored separately in a new array aColorMainStore.push([]);
    //Each time the color block is cycled, it must be reset to the left color oMainColor = JSON.parse(JSON.stringify(oLeftColor));

    //x-axis step value let oXStep = {}
    for(let k in oLeftColor){
      oXStep[k+'Step'] = Math.floor((oLeftColor[k]-oRightColor[k]) / nMainW);
      oXStep[k+'Remainder'] = (oLeftColor[k]-oRightColor[k]) / nMainW - Math.floor((oLeftColor[k]-oRightColor[k]) / nMainW);
      oXStep[k+'Add'] = 0;
    }
    
    //Loop through each column of color blocks in each row for(let j=0;j<nMainW;j++){
      if(j!=0&&j!=nMainW-1){ //The first color block color and the last color do not need to be modified //gradient color from left to right for(let k in oMainColor){
          //Change the color step by step oXStep[k+'Add'] += oXStep[k+'Remainder'];
          if(oXStep[k+'Add']>1){
            oMainColor[k] = oMainColor[k] - (oXStep[k+'Step'] + 1);
            oXStep[k+'Add'] = oXStep[k+'Add'] - 1;
          }else{
            oMainColor[k] = oMainColor[k] - oXStep[k+'Step'];
          }
        }
      }
      if(j==nMainW-1){
        //The final color is set to the right color value oMainColor = JSON.parse(JSON.stringify(oRightColor));
      }
      
      //Store color block colors aColorMainStore[i].push(JSON.stringify(oMainColor));
    }
  }
}

//The default background color is red fnColorSet({r:255,g:0,b:0});

//Get the display color block var eColorFull = document.getElementById('colorFull');
var eColorText = document.getElementById('colorText');
var aColorInput = eColorText.getElementsByTagName('input');
function fnColorFull(color){
  //The color parameter is a string and needs to be converted to an array var color = JSON.parse(color);
  // Modify the display color eColorFull.style.background = 'rgb('+color.join(',')+')';
  //Modify RGB color value for(let i=0;i<aColorInput.length;i++){
    aColorInput[i].value = color[i];
  }
}
//Default display is white fnColorFull('[255,255,255]');

//Get the straw element var eMainDrag = document.getElementById('mainDrag');
//aMainColorStore array color row subscript var nSX = 0;
//aMainColorStore array color column subscript var nSY = 0;
//Get the height of the straw var nMainDragH = eMainDrag.offsetHeight;
//Get the straw limit width var nMainLimitW = nMainW - nMainDragH / 2;
//Get the straw limit height var nMainLimitH = nMainH - nMainDragH / 2;
eMainDrag.addEventListener('mousedown',function(event){
  //Initialize the click position of the mouse to start dragging var nInitX = event.clientX;
  var nInitY = event.clientY;
  //Initialize the straw position var nInitTop = this.offsetTop;
  var nInitLeft = this.offsetLeft;
  //After selecting the straw, bind the mouse move event on the document document.onmousemove = event=>{
    //Cancel the default behavior when the mouse moves to avoid selecting other elements or text event.preventDefault();
    //Get the mouse position let nX = event.clientX - nInitX + nInitLeft;
    let nY = event.clientY - nInitY + nInitTop;
    //The following conditions are used to limit the straw from moving out of the color picking area if (nY >= nMainLimitH-1) {
      nY = nMainLimitH-1;
    }
    if(nY <= -nMainDragH/2){
      nY = -nMainDragH/2;
    }
    if(nX <= -nMainDragH/2){
      nX = -nMainDragH/2;
    }
    if(nX>=nMainLimitW-1){
      nX = nMainLimitW-1;
    }
    //Because the arrow function is used, this still points to the straw. Change the position of the straw this.style.top = nY + 'px';
    this.style.left = nX + 'px';
    //Color assignment, because there is no way to select the last color, so add this formula, so that some colors in the middle cannot be selected nSX = nX + nMainDragH/2;
    nSY = nY + nMainDragH/2;
    //Get the current position color let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Fill the display color area fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
  //Release the event on document after releasing the mouse document.onmouseup = event=>{
    document.onmouseup = null;
    document.onmousemove = null;
  } 
});
//Color picking area binding click event eMainCon.addEventListener('click',function(event){
  //Get the click position let nX = event.offsetX - nMainDragH/2
  let nY = event.offsetY - nMainDragH/2;
  //Add transition style to make the straw have sliding effect eMainDrag.style.transition = '.1s';
  //Delete transition style setTimeout(e=>{
    eMainDrag.style.transition = 'inherit';
  },100)
  //Change the color picking straw position eMainDrag.style.top = nY + 'px';
  eMainDrag.style.left = nX + 'px';
  //Color assignment, because there is no way to select the last color, so add this formula, so that some colors in the middle cannot be selected nSX = nX + nMainDragH/2;
  nSY = nY + nMainDragH/2;
  //Get the current position color let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
  //Fill the display color area fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));    
});

//Bind the mouse down event on the color straw eSideDrag.addEventListener('mousedown',function(event){
  /*...*/
  
  //Mouse release event document.onmouseup = event=>{
    document.onmouseup = null;
    document.onmousemove = null;
    //Set the color of the color picking area color&&fnColorSet(color);
    //Get the current position color let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Fill the display color area fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
});
//Color element binding click event eSeries.addEventListener('click',function(event){
  //*...*/

  //Delete transition style setTimeout(e=>{
    eSideDrag.style.transition = 'inherit';
    //Set the color of the color picking area color&&fnColorSet(color);
    //Get the current position color let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Fill the display color area fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  },100)
  
  /*...*/
});