rgb(255, 255, 0)跟#FFFF00都是表示同一种颜色,这两种表示之间怎么转换的?
业精于勤,荒于嬉;行成于思,毁于随。
先转化为数组,再转化为想要的格式,提供如下代码供参考,最近刚修改的,新增了对透明度的支持
var toArray = function(value) { if (/^#[A-Za-z0-9]{3}$/.test(value)) { value = value.replace(/#/, ""); var arr = []; arr[0] = parseInt(value.substr(0, 1) + value.substr(0, 1), 16); arr[1] = parseInt(value.substr(1, 1) + value.substr(1, 1), 16); arr[2] = parseInt(value.substr(2, 1) + value.substr(2, 1), 16); arr[3] = 1; return arr; } if (/^#[A-Za-z0-9]{6}$/.test(value)) { value = value.replace(/#/, ""); var arr = []; arr[0] = parseInt(value.substr(0, 2), 16); arr[1] = parseInt(value.substr(2, 2), 16); arr[2] = parseInt(value.substr(4, 2), 16); arr[3] = parseInt(1); return arr; } if (/^#[A-Za-z0-9]{8}$/.test(value)) { value = value.replace(/#/, ""); var arr = []; arr[0] = parseInt(value.substr(2, 2), 16); arr[1] = parseInt(value.substr(4, 2), 16); arr[2] = parseInt(value.substr(6, 2), 16); arr[3] = parseInt(value.substr(0, 2), 16) / 255; return arr; } if (/^rgb\([0-9,\.\s]+\)$/.test(value)) { var arr = value.replace(/(rgb\(|\))/gi, "").split(/,\s*/); arr[0] = parseInt(arr[0]); arr[1] = parseInt(arr[1]); arr[2] = parseInt(arr[2]); arr[3] = 1; return arr; } if (/^rgba\([0-9,\.\s]+\)$/.test(value)) { var arr = value.replace(/(rgb\(|\))/gi, "").split(/,\s*/); arr[0] = parseInt(arr[0]); arr[1] = parseInt(arr[1]); arr[2] = parseInt(arr[2]); arr[3] = parseInt(arr[3]); return arr; } return null; }, toHex = function(num) { var hex; num = (num >= 0 && num <= 255) ? num: 0; hex = num.toString(16); return hex.length === 2 ? hex: '0' + hex; }, toValue = { rgb: function(arr) { return 'rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ')'; }, rgba: function(arr) { return 'rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ',' + arr[3] + ')'; }, hex6: function(arr) { return '#' + toHex(arr[0]) + toHex(arr[1]) + toHex(arr[2]); }, hex8: function(arr) { return '#' + toHex(arr[0]) + toHex(arr[1]) + toHex(arr[2]) + toHex(arr[3] * 255); } };
正则写得不严谨,也不简洁,只能以后再折腾了。
就是16进制表示与10进制表示的转换一个 rgb 颜色值本质代表 rgb 三个颜色分量的值
如:
#ffff00 =>{ r = 0xff = 255 g = 0xff = 255 b = 0x00 = 0 } => rgb(255,255,0)
#FFFF00是十六进制的写法,也可以写成小写的#ffff00,前两个字符表示红色的数值,中间两个字符是绿色的数值,最后两个字符是蓝色的数值
#FFFF00
#ffff00
先转化为数组,再转化为想要的格式,提供如下代码供参考,最近刚修改的,新增了对透明度的支持
正则写得不严谨,也不简洁,只能以后再折腾了。
如:
#FFFF00
是十六进制的写法,也可以写成小写的#ffff00
,前两个字符表示红色的数值,中间两个字符是绿色的数值,最后两个字符是蓝色的数值