十六进制颜色与RGB颜色转换

十六进制颜色与RGB颜色转换以及追加透明度

包含透明度的转换和重置。
其中，用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》；

// RGB转换为16进制
export const toHex = (color, opacity) => {const reg = /^(rgb|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*(,[\s]*[0-9.]+[\s]*)*\)$/;if (reg.test(color)) {let strHex = "#";const colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");for (let i = 0; i < colorArr.length; i++) {if (i === 3) {if (!isNumber(opacity)) {const opacityValue = parseInt(Number(colorArr[i]) * 100);if (opacityValue < 100 && opacityValue >= 10) strHex += opacityValue;else if (opacityValue < 10) strHex += "0" + opacityValue;}} else {const colorNum = colorArr[i] > 255 ? 255 : colorArr[i];const hex = Number(colorNum).toString(16);if (hex.length === 1) strHex += "0" + hex;else strHex += hex;}}if (isNumber(opacity)) {const opacityValue = parseInt(opacity * 100);if (opacityValue < 100 && opacityValue >= 10) strHex += opacityValue;else if (opacityValue < 10) strHex += "0" + opacityValue;}return strHex;} else return String(color);
};
// 16进制转换为RGB
export const toRgb = (color, opacity) => {const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{6}[0-9]{2})$/;color = color.toLowerCase();if (reg.test(color)) {if (color.length === 4) {let colorNew = "#";for (let i = 1; i < 4; i += 1) {const str = color.slice(i, i + 1);colorNew += str + str;}color = colorNew;}const colorChange = [];for (let i = 1; i < 7; i += 2) {colorChange.push(parseInt("0x" + color.slice(i, i + 2)));}if (isNumber(opacity)) colorChange.push(opacity);else if (color.length === 9)colorChange.push(parseFloat("0." + color.slice(7, 8)));return "RGB(" + colorChange.join(",") + ")";} else return color;
};

调用方法：

  let color = "RGB( 26 ,43, 60,0.2 )";console.log(color , toHex(color), toHex(color, 0.8)); //结果"RGB( 26 ,43, 60,0.2 ) #1a2b3c20 #1a2b3c80"c = "#1a2b3f20";console.log(color, toRgb(color), toRgb(color, 0.8)); //结果"#1a2b3f20 RGB(26,43,63,0.2) RGB(26,43,63,0.8)"

十六进制颜色与RGB颜色转换相关推荐

php六进制颜色,PHP RGB颜色和十六进制颜色互转
/** * RGB转十六进制 * @param $rgb RGB颜色的字符串如:rgb(255,255,255); * @return string 十六进制颜色值如:#FFFFFF */ fu ...
IOS，十六进制颜色和RGB颜色的宏定义
2019独角兽企业重金招聘Python工程师标准>>> 16进制颜色值宏定义. //调用NSString *str = model.Color; NSString *strColor ...
Js 实现颜色值转换_Js 实现十六进制颜色值和RGB颜色值转换整理
一.Js 实现颜色值转换处理 js实现十六进制颜色值转RGB颜色值 js实现 RGB颜色值转十六进制颜色值 var colorChange = {rgbToHex: function (val) ...
CSS颜色：RGB颜色/HEX颜色/HSL颜色（网页颜色完全总结）
目录 CSS 颜色名 CSS 背景色实例 CSS 文本颜色编辑实例 CSS 边框颜色实例 CSS 颜色值实例 RGB 值 rgb(red, green, blue) 实例实例 RGBA ...
十六进制颜色值和rgb颜色值转换
// 将rgb颜色转成hex , 列如输入(24,12,255) export function colorRGB2Hex(r, g, b) {let hex = "#" + ( ...
JavaScript中16进制颜色与rgb颜色互相转换
16进制转 rgb function hexToRgba(hex, opacity) {if (!hex) hex = '#ededed';let rgba = 'rgba(' + parseInt( ...
将16进制的颜色转为rgb颜色
考虑到通用性, 就定义一个colorToRGB函数吧,将16进制的颜色值当做参数传入. 首先需要将参数转为字符串类型的,'color = ""+color;' 检查第一个字符是否为 ...
颜色模型与颜色应用---RGB颜色模型
2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/liyangke/blog/2876997
RGB颜色转换十六进制颜色
RGB颜色转换为十六进制颜色: 十六进制颜色转换为RGB颜色: 十六进制颜色查询颜色英文代码形象描述十六进制 RGB LightPink 浅粉红 #FFB6C1 25 ...
JavaScript随机生成颜色以及十六进制颜色与RGB颜色值的相互转换
/*** 随机生成颜色* @return 随机生成的十六进制颜色 */function randomColor(){var colorStr=Math.floor(Math.random()*0xFF ...

十六进制颜色与RGB颜色转换

十六进制颜色与RGB颜色转换以及追加透明度

十六进制颜色与RGB颜色转换相关推荐

最新文章

热门文章