一、效果介绍

设计师在远程和客户沟通确认页面风格和色调时，有时也会因为颜色描述的比较模糊，导致理解偏差。只能根据经验在设计软件中调配出几个版本的颜色给对方来确认，而颜色如果不是客户想要的那种，就又要重新调配。这样重复的试错对双方的精力都会有所损耗，严重的也可能会影响到后续的协作。

针对这种情况，长沙网站建设想出一招，那就是直接在页面上制作出一个可以调配颜色的功能，打开网页就可以使用，让设计师在和客户沟通页面颜色时，快速的准确的明白到客户想要的到底是什么颜色。

上为页面调色器效果展示图

二、效果解析

在图中可以看到，长沙网站设计出的这个调色器界面分为三个区域，顶部是显示颜色的区域，中间显示了当前颜色十六进制值和RGB值，方便设计师记录。下方则是调色控制区域，通过拖动 R（红）、G（绿）、B（蓝）三原色条上的白色滑块来调整各自的数值，它们将同步到颜色显示区域和色值记录区域。

功能完整代码如下：

左为html代码，右为Javascript代码

核心代码：

function updateColor() {
      var red = parseInt(thumbR.value, 10);
      var green = parseInt(thumbG.value, 10);
      var blue = parseInt(thumbB.value, 10);
      valueR.textContent = red;
      valueG.textContent = green;
      valueB.textContent = blue;

      var hex = '#' + toHex(red) + toHex(green) + toHex(blue);
      var rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
      content.style.backgroundColor = hex;
      colors.textContent = hex;
      colort.textContent = rgb;
    }

    thumbR.addEventListener('input', updateColor); 
    thumbG.addEventListener('input', updateColor); 
    thumbB.addEventListener('input', updateColor); 

当长沙网站开发拖动R，G，B条上的白色滑块时，将会触发input事件。调用 updateColor() 函数读取R、G、B的值，拼接成十六进制和RGB两种格式后进行传递，颜色显示区根据这个值进行背景颜色变化，色值记录区域则将这两个值展示出来。

三、效果演示视频：

四、效果扩展与应用场景

通过上面的内容，我们已经可以调出任何我们想要的颜色，同时也能看到颜色的十六进制值和rbg值。

手动用鼠标选中复制可能有些麻烦，所以可以通过调整Javascript代码，增加一个“复制颜色”的按钮，只需要点击一下就可以将当前的颜色复制出来，更加方便的同时也提升了这个功能的实用性。

在客户对颜色的描述不准确时，就可以使用这个功能，让客户自己调整到正确的色值，避免来来回回调整。

上述内容就是长沙网站制作整理出的页面调色器的制作方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.