rgb和十六进制颜色代码相互转换（rgb和16进制颜色代码互换）

css中常用的两种颜色表示方式分别是rgb和十六进制两种，有时候可能特殊需要，要将获取到的rgb颜色转换为十六进制，反之也有这种情况。网上这种颜色转换工具比较少，于是本人就开发了这么一个小工具，方便使用，并将代码分享给大家。

先上效果图：

工具地址：http://oohy4f8bb.bkt.clouddn.com/colorExchange.html

代码实现

原生js获取DOM对象、绑定事件
js正则表达式校验用户输入
parseInt(‘’,16)16进制转10进制
num.toString(16)10进制转16进制

完整代码如下：

<!DOCTYPE html>

<html>

<head>

<title>rgb与十六进制颜色转换</title>

<style>

font-family: "微软雅黑";

box-sizing:border-box;

}

html,body,.page{

height:100%;

margin:0px;

}

.page{

background:url(http://ol435r2l8.bkt.clouddn.com/background.jpg) no-repeat center /100%;

}

.main{

width: 751px;

height: 100%;

margin: 0 auto;

background: rgba(255, 255, 255, 0.81);

}

.header{

text-align: center;

height: 46px;

line-height: 46px;

font-size: 26px;

background-color: #5cdc85;

color: #fff;

border-radius: 0px;

box-shadow: 0px 8px 5px #b5b5b5;

}

.content{

margin: 50px 10px;

}

input{

height:35px;

width:200px;

outline:0;

border:1px solid #EEEEEE;

padding:5px;

}

input.rgb{

width:50px;

}

.btn{

width: 60px;

height: 30px;

line-height: 30px;

text-align: center;

display: inline-block;

background: #55aae2;

color: #fff;

border-radius: 3px;

cursor:pointer;

}

#rgbOutput,#hexOutput{

color: rgb(191, 9, 244);

font-size: 16px;

font-weight: 600;

}

#rgbColor,#hexColor{

display: inline-block;

width: 30px;

height: 30px;

position: absolute;

margin-left: 60px;

}

</style>

</head>

<body>

<div class="header">颜色代码转换</div>

</header>

<p>

<span>十六进制颜色：</span>

</p>

</p>

<span>RGB颜色：</span>

</p>

</p>

</div>

//颜色值输入区域

var i_hexcode = document.getElementById("i-hexcode");

var i_rgbcodeR = document.getElementById("i-rgbcodeR");

var i_rgbcodeG = document.getElementById("i-rgbcodeG");

var i_rgbcodeB = document.getElementById("i-rgbcodeB");

//颜色值输出区域

var rgbOutput = document.getElementById("rgbOutput");

var rgbColor = document.getElementById("rgbColor");

var hexOutput = document.getElementById("hexOutput");

var hexColor = document.getElementById("hexColor");

//16进制转rgb转换按钮

var _16torgb = document.getElementById("16torgb");

//rgb转16进制转换按钮

var rgbto16 = document.getElementById("rgbto16");

//校验16进制颜色值正则表达式

var reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;

//校验rgb颜色值只能输入整数且最多三位数字

var regRgb = /^[0-9]{1,3}$/;

//为按钮注册点击事件

_16torgb.addEventListener("click",sixteenToRgb);

rgbto16.addEventListener("click",rgbToSixteen);

/**

* 16toRgb颜色转换

function sixteenToRgb(){

var hexValue = i_hexcode.value;

//首先校验用户填写的代码是否正确

if(!reg.test(hexValue)){

alert("颜色值输入有误请检查！");

}else{

var codeValue = hexValue.replace("#",'');

var rgbStr = "";

if(codeValue.length==6){

var decR = parseInt(codeValue.slice(0,2),16);

var decG = parseInt(codeValue.slice(2,4),16);

var decB = parseInt(codeValue.slice(4,6),16);

rgbStr = decR+','+decG+','+decB;

}else{

var decR = codeValue.slice(0,1);

var decG = codeValue.slice(1,2);

var decB = codeValue.slice(2,3);

decR = parseInt(decR+decR,16);

decG = parseInt(decG+decG,16);

decB = parseInt(decB+decB,16);

rgbStr = decR+','+decG+','+decB;

}

rgbOutput.innerText = rgbStr;

rgbColor.style.background = "rgb("+rgbStr+")";

}

/**

* rgbto16颜色转换

function rgbToSixteen(){

var rgbValueR = i_rgbcodeR.value;

var rgbValueG = i_rgbcodeG.value;

var rgbValueB = i_rgbcodeB.value;

//首先校验用户填写的代码是否正确

if((!regRgb.test(rgbValueR)||rgbValueR>255)||(!regRgb.test(rgbValueG)||rgbValueG>255)||(!regRgb.test(rgbValueB)||rgbValueB>255)){

alert("颜色值输入有误请检查！");

}else{

var rgbValueR = parseInt(rgbValueR);

var rgbValueG = parseInt(rgbValueG);

var rgbValueB = parseInt(rgbValueB);

var rToHex = rgbValueR.toString(16);

var gToHex = rgbValueG.toString(16);

var bToHex = rgbValueB.toString(16);

if(rToHex.length==1){

rToHex = "0"+rToHex;

}

if(gToHex.length==1){

gToHex = "0"+gToHex;

}

if(bToHex.length==1){

bToHex = "0"+bToHex;

}

hexOutput.innerText = "#"+rToHex+gToHex+bToHex;

hexColor.style.background = "#"+rToHex+gToHex+bToHex;

}

</script>

</body>

</html>

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

rgb和十六进制颜色代码相互转换（rgb和16进制颜色代码互换）

猜你喜欢

网站首页 > 技术文章正文