JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换 （实用、赞）
原文出处：https://www.haorooms.com/post/color_rgb_transform
延伸阅读：用js生成全色系调色盘的算法
前言
今天做了这个需求，就是前端支持rgba设置，但是后台生成图片的时候不支持rgba,需要2个值。分别是一个十六进制颜色值和一个opacity透明度，这就要我这边传值的时候，把原来的rgba转换成2个值，然后传给后台。（注，之所以前端没有分成2个字段，是因为前端设置颜色的时候直接用一个rgba设置的，这样用户体验好，分别设置颜色和透明度的话，还要分2次，对用户来说稍微有点麻烦。）
转换方法
转换方法其实网上搜索也能搜索到，这里暂时列一下:
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"十六进制颜色转为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)"方法二： 用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(',')})`
}JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换 （实用、赞）相关推荐
- html的hsl形式的颜色选择器,简单的HSL颜色选择器/拾色器
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById("input" ...
- 前端需要了解的颜色模型，RGB、HSL和HSV
目录 RGB模型 RGB颜色值 rgb 转 hex hex 转 rgb HSL模型 HSV(B)模型 RGB 与 HSL 的转换 rgb 转 hsl hsl 转 rgb 颜色模型,是用来表示颜色的数学 ...
- CSS颜色：RGB颜色/HEX颜色/HSL颜色（网页颜色完全总结）
目录 CSS 颜色名 CSS 背景色 实例 CSS 文本颜色 编辑 实例 CSS 边框颜色 实例 CSS 颜色值 实例 RGB 值 rgb(red, green, blue) 实例 实例 RGBA ...
- Hex hsl 转换 php,关于 RGB，HEX，HSL 颜色相互转换
最近一段时间在折腾一个微信在线编辑器的项目,使用 UEditor 进行二次开发. 关于 UEditor 的定制,用到的都太粗浅,官方文档上都能找得到.主题使用的样式表是 ueditor.css 而不是 ...
- 数字图像处理与Python实现-颜色空间转换-RGB颜色空间与HSL颜色转换
RGB颜色空间与HSL颜色转换 RGB颜色空间与HSL颜色转换 1. 前言 2. RGB颜色空间与HSL颜色转换描述 3. 程序实现 1. 前言 HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示 ...
- [Python模块学习]用colorsys模块转换颜色模型，常见颜色模型简介(RGB/HSV/HSL/YIQ)
colorsys模块 博主最近又进入了无聊模式,没事就翻Python标准库读源码读着玩.但是里面有几个模块确实规模比较大,所以坑挖了一半就停了-现在电脑桌面上一堆没填完的坑.总之慢慢填吧- 今天发现了 ...
- RGB颜色转HSL颜色
RGB颜色转HSL颜色:http://www.yansedaquan.com/YanSeDaQuan/ 定义HSL对象 ,C#里定义是HSB,个人觉得两个是一样的,只是叫法不同而已. /// < ...
- 【C# / Algorithm】RGB、HSV、HSL颜色模型的互相转换
RGB.HSV.HSL颜色模型的含义本文就不赘述了,大家可以直接百度到. 在此提供一个封装好的可以对三种颜色模型进行互相转换的辅助类. 以上是使用该类写出的程序示例. 以下是颜色模型类的描述 #reg ...
- Hex hsl 转换 php,HEX和RGB和HSL颜色数值在线转换工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 //http://stackoverflow.com/questions/2353211/hsl-to-rg ...
最新文章
- Some thoughts on my own O/R Mapping or Code Generation tools
- Dubbo启动，调用方法失败【问题：调用超时】
- Enumeration和Iterator的区别
- cisco 生成树协议PVST+
- 极大似然估计的渐进正态性
- [原创]Silverlight与SQLite数据库的互操作(CURD完全解析)[Final]
- 史上最全正则表达式语法，文末附常用表达式！
- Ubuntu18.04安装教程及部分问题总结
- 计算机桌面图片打不开显示内存不足,电脑上的windows图片查看器提示内存不足如何解决...
- html中加减页码怎么设置,word中如何设置页码
- IT行业是什么工作？做什么的？
- K8s-临时容器 Ephemeral Containers
- OpenRisc-6-wishbone实验
- linux rm 文件找回_linux rm -rf * 文件恢复记
- varnish 高性能加速器
- iOS-发布按钮动画(类似于闲鱼发布),弹出动画github开源
- Github详细教程
- 在线时间戳格式化转换工具
- php1蛋白质带电情况,结合蛋白质（1）
- 2019 CCPC 河南省赛A:最大下降矩阵（dp）