颜色搭配是件头疼的事，工作空隙，利用range做个简单的手动调色，可得到rgb值和相应的十六进制色值。因为用到range标签，建议使用搜狗、火狐，IE10及以上版本代码如下：
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<Meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<style type="text/css">
body,div,span {margin: 0;padding: 0;}
.div1 {margin: 20px auto;border: 1px solid black;width: 400px;height: 250px;opacity: 1;}
.div2 {margin: 0 auto;width: 600px;text-align: center;}
span {width: 180px; display: inline-block;text-align: right;}
span.val {width: 50px;display: inline-block;text-align: left;}
input {margin: 3px 15px;outline: none;}
h2 {margin: 3px auto;}
G（绿色）：
B（蓝色）：
O（透明）：
O（透明）：
<script type="text/javascript">
(function() {
var inputNodes = document.getElementsByTagName("input");
var len = inputNodes.length;
for(var i=0;i<len;i++) {
var inputNode = inputNodes[i];
inputNode.index = i;
inputNode.onchange = function() {
var inputVal = inputNodes[this.index].value;
var inputIdAttr = inputNodes[this.index].getAttribute("id");
var spanIdAttr = inputIdAttr.replace("Range","Value");
document.getElementById(spanIdAttr).innerHTML = inputVal;
changeColor();
};
}
function changeColor() {
var rgbColor = "";
var oColor = "#";
for(var i=0;i<len-1;i++) {
var inputNode = inputNodes[i];
rgbColor += rgbColor!=""?",":"";
rgbColor += inputNode.value;
var n_10 = parseInt(inputNode.value);
oColor += n_10.toString(16).length==1?"0"+n_10.toString(16):n_10.toString(16);
}
var div1 = document.getElementById("div1");
div1.style.background = "RGB("+rgbColor+")";
div1.style.opacity = inputNodes[len-1].value;
var rgb1 = document.getElementById("rgb1");
rgb1.innerHTML = "RGB("+rgbColor+")";
var rgb2 = document.getElementById("rgb2");
rgb2.innerHTML = oColor.toUpperCase();
}
})();