JavaScript 十六进制颜色与RGB, HSL颜色之间相互转换方法
目录
文章目录隐藏
JavaScript 的十六进制颜色与 RGB, HSL 颜色之间相互转换方法在网上大家都可以搜到,这里只是做一个简单罗列收藏,重要的是完成一个需求,前端支持 rgba 设置,但是后台生成图片的时候不支持 rgba,需要 2 个值。分别是一个十六进制颜色值和一个 opacity 透明度,这就要我这边传值的时候,把原来的 rgba 转换成 2 个值,然后传给后台。
十六进制颜色与 RGB 之间转换
十六进制颜色转为 RGB
var colorRgb = function(sColor){ sColor = sColor.toLowerCase(); //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // 如果是 16 进制颜色 if (sColor && reg.test(sColor)) { if (sColor.length === 4) { var sColorNew = "#"; for (var i=1; i<4; i+=1) { sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1)); } sColor = sColorNew; } //处理六位的颜色值 var sColorChange = []; for (var i=1; i<7; i+=2) { sColorChange.push(parseInt("0x"+sColor.slice(i, i+2))); } return "RGB(" + sColorChange.join(",") + ")"; } return sColor; }; colorRgb("#fff") "RGB(255,255,255)"
rgb 转为十六进制颜色
var colorHex = function(color){ var that = color; //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // 如果是 rgb 颜色表示 if (/^(rgb|RGB)/.test(that)) { var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); var strHex = "#"; for (var i=0; i<aColor.length; i++) { var hex = Number(aColor[i]).toString(16); if (hex.length < 2) { hex = '0' + hex; } strHex += hex; } if (strHex.length !== 7) { strHex = that; } return strHex; } else if (reg.test(that)) { var aNum = that.replace(/#/,"").split(""); if (aNum.length === 6) { return that; } else if(aNum.length === 3) { var numHex = "#"; for (var i=0; i<aNum.length; i+=1) { numHex += (aNum[i] + aNum[i]); } return numHex; } } return that; }; colorHex('rgb(255,255,255)') "#ffffff"
方法二: 用 dom 的方式
var colorToRgb = function (color) { var div = document.createElement('div'); div.style.backgroundColor = color; document.body.appendChild(div); var c = window.getComputedStyle(div).backgroundColor; document.body.removeChild(div); return c; };
HSL 和 RGB 的互转
HSL 转 RGB
/** * HSL 颜色值转换为 RGB. * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space. * h, s, 和 l 设定在 [0, 1] 之间 * 返回的 r, g, 和 b 在 [0, 255]之间 * * @param Number h 色相 * @param Number s 饱和度 * @param Number l 亮度 * @return Array RGB 色值数值 */ function hslToRgb(h, s, l) { var r, g, b; if(s == 0) { r = g = b = l; // achromatic } else { var hue2rgb = function hue2rgb(p, q, t) { if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; }
RGB 转 HSL
/** * RGB 颜色值转换为 HSL. * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space. * r, g, 和 b 需要在 [0, 255] 范围内 * 返回的 h, s, 和 l 在 [0, 1] 之间 * * @param Number r 红色色值 * @param Number g 绿色色值 * @param Number b 蓝色色值 * @return Array HSL 各值数组 */ 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]; }
rgba 转化为 2 个值得方法
watch: { 'background'(val) { // 转换成 2 个字段,用了比较笨的办法转吧 let tempval = val.replace('rgba(', '').replace(')', '').split(',') this.$set(this.haorooms.data, 'background', {}) this.$set(this.haorooms.data.background, 'color', `rgb(${tempval[0]},${tempval[1]},${tempval[2]})`) this.$set(this.haorooms.data.background, 'opacity', tempval[3]) } }
2 个值转为 RGBA 的方法(回填需要)
if (this.haorooms.data.background) { let color = this.colorToRgb(this.templateData.data.background.color) // 上面列举的方法 let tempval = color.replace('rgb(', '').replace(')', '').split(',') tempval.push(this.templateData.data.background.opacity) this.background = `rgba(${tempval.join(',')})` }
以上就是今天的 JavaScript 十六进制颜色与 RGB, HSL 颜色之间相互转换方法,纯属个人总结收藏,当然希望对大家有帮助。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JavaScript 十六进制颜色与RGB, HSL颜色之间相互转换方法
码云笔记 » JavaScript 十六进制颜色与RGB, HSL颜色之间相互转换方法