js颜色的单词名称字符串转为rgb颜色值

Posted 2023-04-18 lxm-cnblog

js颜色的单词名称字符串转为rgb颜色值

将js单词名称如red,green,blue转为rgb颜色值, 暂时没找到什么特别的方法。网上找到了颜色名称与rgb值的对应表，然后构造成map获取rgb值。
代码放在: https://github.com/lxmghct/my-vue-components
src/utils/color_convert.js下。
完整代码如下：

const name2rgbMap = 
  \'aliceblue\': \'rgb(240,248,255)\',
  \'antiquewhite\': \'rgb(250,235,215)\',
  \'aqua\': \'rgb(0,255,255)\',
  \'auqamarin\': \'rgb(127,255,170)\',
  \'azure\': \'rgb(240,255,255)\',
  \'beige\': \'rgb(107,142,35)\',
  \'bisque\': \'rgb(255,228,196)\',
  \'black\': \'rgb(0,0,0)\',
  \'blanchedalmond\': \'rgb(255,235,205)\',
  \'blue\': \'rgb(0,0,255)\',
  \'blueviolet\': \'rgb(138,43,226)\',
  \'brown\': \'rgb(165,42,42)\',
  \'brulywood\': \'rgb(222,184,135)\',
  \'cadetblue\': \'rgb(95,158,160)\',
  \'chartreuse\': \'rgb(127,255,0)\',
  \'chocolate\': \'rgb(210,105,30)\',
  \'coral\': \'rgb(255,127,80)\',
  \'cornflowerblue\': \'rgb(100,149,237)\',
  \'cornislk\': \'rgb(255,248,220)\',
  \'crimson\': \'rgb(220,20,60)\',
  \'cyan\': \'rgb(0,255,255)\',
  \'darkblue\': \'rgb(0,0,139)\',
  \'darkcyan\': \'rgb(0,139,139)\',
  \'darkgray\': \'rgb(169,169,169)\',
  \'darkgreen\': \'rgb(0,100,0)\',
  \'darkkhaki\': \'rgb(189,183,107)\',
  \'darkmagenta\': \'rgb(139,0,139)\',
  \'darkorange\': \'rgb(255,140,0)\',
  \'darkorchid\': \'rgb(153,50,204)\',
  \'darkred\': \'rgb(139,0,0)\',
  \'darksalmon\': \'rgb(233,150,122)\',
  \'darkseagreen\': \'rgb(143,188,143)\',
  \'darkslateblue\': \'rgb(72,61,139)\',
  \'darkslategray\': \'rgb(47,79,79)\',
  \'darkturquoise\': \'rgb(0,206,209)\',
  \'darkvoilet\': \'rgb(148,0,211)\',
  \'deeppink\': \'rgb(255,20,147)\',
  \'deepskyblue\': \'rgb(0,191,255)\',
  \'dimgray\': \'rgb(105,105,105)\',
  \'doderblue\': \'rgb(30,144,255)\',
  \'firebrick\': \'rgb(178,34,34)\',
  \'floralwhite\': \'rgb(255,250,240)\',
  \'forestgreen\': \'rgb(34,139,34)\',
  \'fuchsia\': \'rgb(255,0,255)\',
  \'gainsboro\': \'rgb(220,220,220)\',
  \'ghostwhite\': \'rgb(248,248,255)\',
  \'gold\': \'rgb(255,215,0)\',
  \'goldenrod\': \'rgb(218,165,32)\',
  \'gray\': \'rgb(128,128,128)\',
  \'green\': \'rgb(0,128,0)\',
  \'greenyellow\': \'rgb(173,255,47)\',
  \'honeydew\': \'rgb(240,255,240)\',
  \'hotpink\': \'rgb(255,105,180)\',
  \'indianred\': \'rgb(205,92,92)\',
  \'indigo\': \'rgb(75,0,130)\',
  \'ivory\': \'rgb(255,255,240)\',
  \'khaki\': \'rgb(240,230,140)\',
  \'lavender\': \'rgb(230,230,250)\',
  \'lavenderblush\': \'rgb(255,240,245)\',
  \'lawngreen\': \'rgb(124,252,0)\',
  \'lemonchiffon\': \'rgb(255,250,205)\',
  \'lightblue\': \'rgb(173,216,230)\',
  \'lightcoral\': \'rgb(240,128,128)\',
  \'lightcyan\': \'rgb(225,255,255)\',
  \'lightgoldenrodyellow\': \'rgb(250,250,210)\',
  \'lightgreen\': \'rgb(144,238,144)\',
  \'lightgrey\': \'rgb(211,211,211)\',
  \'lightpink\': \'rgb(255,182,193)\',
  \'lightsalmon\': \'rgb(255,160,122)\',
  \'lightseagreen\': \'rgb(32,178,170)\',
  \'lightskyblue\': \'rgb(135,206,250)\',
  \'lightslategray\': \'rgb(119,136,153)\',
  \'lightsteelblue\': \'rgb(176,196,222)\',
  \'lightyellow\': \'rgb(255,255,224)\',
  \'lime\': \'rgb(0,255,0)\',
  \'limegreen\': \'rgb(50,205,50)\',
  \'linen\': \'rgb(250,240,230)\',
  \'magenta\': \'rgb(255,0,255)\',
  \'maroon\': \'rgb(128,0,0)\',
  \'mediumaquamarine\': \'rgb(0,250,154)\',
  \'mediumblue\': \'rgb(0,0,205)\',
  \'mediumorchid\': \'rgb(186,85,211)\',
  \'mediumpurple\': \'rgb(147,112,219)\',
  \'mediumslateblue\': \'rgb(123,104,238)\',
  \'mediumspringgreen\': \'rgb(245,255,250)\',
  \'mediumturquoise\': \'rgb(72,209,204)\',
  \'mediumvioletred\': \'rgb(199,21,133)\',
  \'midnightblue\': \'rgb(25,25,112)\',
  \'mintcream\': \'rgb(0,255,127)\',
  \'mistyrose\': \'rgb(255,228,225)\',
  \'moccasin\': \'rgb(255,228,181)\',
  \'navajowhite\': \'rgb(255,222,173)\',
  \'navy\': \'rgb(0,0,128)\',
  \'oldlace\': \'rgb(253,245,230)\',
  \'olive\': \'rgb(128,128,0)\',
  \'olivedrab\': \'rgb(85,107,47)\',
  \'orange\': \'rgb(255,165,0)\',
  \'orangered\': \'rgb(255,69,0)\',
  \'orchid\': \'rgb(218,112,214)\',
  \'palegodenrod\': \'rgb(238,232,170)\',
  \'palegreen\': \'rgb(152,251,152)\',
  \'paleturquoise\': \'rgb(175,238,238)\',
  \'palevioletred\': \'rgb(219,112,147)\',
  \'papayawhip\': \'rgb(255,239,213)\',
  \'peachpuff\': \'rgb(255,218,185)\',
  \'peru\': \'rgb(205,133,63)\',
  \'pink\': \'rgb(255,192,203)\',
  \'plum\': \'rgb(221,160,221)\',
  \'powderblue\': \'rgb(176,224,230)\',
  \'purple\': \'rgb(128,0,128)\',
  \'red\': \'rgb(255,0,0)\',
  \'rosybrown\': \'rgb(188,143,143)\',
  \'royalblue\': \'rgb(65,105,225)\',
  \'saddlebrown\': \'rgb(139,69,19)\',
  \'salmon\': \'rgb(250,128,114)\',
  \'sandybrown\': \'rgb(244,164,96)\',
  \'seagreen\': \'rgb(46,139,87)\',
  \'seashell\': \'rgb(255,245,238)\',
  \'sienna\': \'rgb(160,82,45)\',
  \'silver\': \'rgb(192,192,192)\',
  \'skyblue\': \'rgb(135,206,235)\',
  \'slateblue\': \'rgb(106,90,205)\',
  \'slategray\': \'rgb(112,128,144)\',
  \'snow\': \'rgb(255,250,250)\',
  \'springgreen\': \'rgb(60,179,113)\',
  \'steelblue\': \'rgb(70,130,180)\',
  \'tan\': \'rgb(210,180,140)\',
  \'teal\': \'rgb(0,128,128)\',
  \'thistle\': \'rgb(216,191,216)\',
  \'tomato\': \'rgb(255,99,71)\',
  \'turquoise\': \'rgb(64,224,208)\',
  \'violet\': \'rgb(238,130,238)\',
  \'wheat\': \'rgb(245,222,179)\',
  \'white\': \'rgb(255,255,255)\',
  \'whitesmoke\': \'rgb(245,245,245)\',
  \'yellow\': \'rgb(255,255,0)\'

const name2hexrgbMap = 
  \'aliceblue\': \'#f0f8ff\',
  \'antiquewhite\': \'#faebd7\',
  \'aqua\': \'#00ffff\',
  \'auqamarin\': \'#7fffaa\',
  \'azure\': \'#f0ffff\',
  \'beige\': \'#6b8e23\',
  \'bisque\': \'#ffe4c4\',
  \'black\': \'#000000\',
  \'blanchedalmond\': \'#ffebcd\',
  \'blue\': \'#0000ff\',
  \'blueviolet\': \'#8a2be2\',
  \'brown\': \'#a52a2a\',
  \'brulywood\': \'#deb887\',
  \'cadetblue\': \'#5f9ea0\',
  \'chartreuse\': \'#7fff00\',
  \'chocolate\': \'#d2691e\',
  \'coral\': \'#ff7f50\',
  \'cornflowerblue\': \'#6495ed\',
  \'cornislk\': \'#fff8dc\',
  \'crimson\': \'#dc143c\',
  \'cyan\': \'#00ffff\',
  \'darkblue\': \'#00008b\',
  \'darkcyan\': \'#008b8b\',
  \'darkgray\': \'#a9a9a9\',
  \'darkgreen\': \'#006400\',
  \'darkkhaki\': \'#bdb76b\',
  \'darkmagenta\': \'#8b008b\',
  \'darkorange\': \'#ff8c00\',
  \'darkorchid\': \'#9932cc\',
  \'darkred\': \'#8b0000\',
  \'darksalmon\': \'#e9967a\',
  \'darkseagreen\': \'#8fbc8f\',
  \'darkslateblue\': \'#483d8b\',
  \'darkslategray\': \'#2f4f4f\',
  \'darkturquoise\': \'#00ced1\',
  \'darkvoilet\': \'#9400d3\',
  \'deeppink\': \'#ff1493\',
  \'deepskyblue\': \'#00bfff\',
  \'dimgray\': \'#696969\',
  \'doderblue\': \'#1e90ff\',
  \'firebrick\': \'#b22222\',
  \'floralwhite\': \'#fffaf0\',
  \'forestgreen\': \'#228b22\',
  \'fuchsia\': \'#ff00ff\',
  \'gainsboro\': \'#dcdcdc\',
  \'ghostwhite\': \'#f8f8ff\',
  \'gold\': \'#ffd700\',
  \'goldenrod\': \'#daa520\',
  \'gray\': \'#808080\',
  \'green\': \'#008000\',
  \'greenyellow\': \'#adff2f\',
  \'honeydew\': \'#f0fff0\',
  \'hotpink\': \'#ff69b4\',
  \'indianred\': \'#cd5c5c\',
  \'indigo\': \'#4b0082\',
  \'ivory\': \'#fffff0\',
  \'khaki\': \'#f0e68c\',
  \'lavender\': \'#e6e6fa\',
  \'lavenderblush\': \'#fff0f5\',
  \'lawngreen\': \'#7cfc00\',
  \'lemonchiffon\': \'#fffacd\',
  \'lightblue\': \'#add8e6\',
  \'lightcoral\': \'#f08080\',
  \'lightcyan\': \'#e1ffff\',
  \'lightgoldenrodyellow\': \'#fafad2\',
  \'lightgreen\': \'#90ee90\',
  \'lightgrey\': \'#d3d3d3\',
  \'lightpink\': \'#ffb6c1\',
  \'lightsalmon\': \'#ffa07a\',
  \'lightseagreen\': \'#20b2aa\',
  \'lightskyblue\': \'#87cefa\',
  \'lightslategray\': \'#778899\',
  \'lightsteelblue\': \'#b0c4de\',
  \'lightyellow\': \'#ffffe0\',
  \'lime\': \'#00ff00\',
  \'limegreen\': \'#32cd32\',
  \'linen\': \'#faf0e6\',
  \'magenta\': \'#ff00ff\',
  \'maroon\': \'#800000\',
  \'mediumaquamarine\': \'#00fa9a\',
  \'mediumblue\': \'#0000cd\',
  \'mediumorchid\': \'#ba55d3\',
  \'mediumpurple\': \'#9370db\',
  \'mediumslateblue\': \'#7b68ee\',
  \'mediumspringgreen\': \'#f5fffa\',
  \'mediumturquoise\': \'#48d1cc\',
  \'mediumvioletred\': \'#c71585\',
  \'midnightblue\': \'#191970\',
  \'mintcream\': \'#00ff7f\',
  \'mistyrose\': \'#ffe4e1\',
  \'moccasin\': \'#ffe4b5\',
  \'navajowhite\': \'#ffdead\',
  \'navy\': \'#000080\',
  \'oldlace\': \'#fdf5e6\',
  \'olive\': \'#808000\',
  \'olivedrab\': \'#556b2f\',
  \'orange\': \'#ffa500\',
  \'orangered\': \'#ff4500\',
  \'orchid\': \'#da70d6\',
  \'palegodenrod\': \'#eee8aa\',
  \'palegreen\': \'#98fb98\',
  \'paleturquoise\': \'#afeeee\',
  \'palevioletred\': \'#db7093\',
  \'papayawhip\': \'#ffefd5\',
  \'peachpuff\': \'#ffdab9\',
  \'peru\': \'#cd853f\',
  \'pink\': \'#ffc0cb\',
  \'plum\': \'#dda0dd\',
  \'powderblue\': \'#b0e0e6\',
  \'purple\': \'#800080\',
  \'red\': \'#ff0000\',
  \'rosybrown\': \'#bc8f8f\',
  \'royalblue\': \'#4169e1\',
  \'saddlebrown\': \'#8b4513\',
  \'salmon\': \'#fa8072\',
  \'sandybrown\': \'#f4a460\',
  \'seagreen\': \'#2e8b57\',
  \'seashell\': \'#fff5ee\',
  \'sienna\': \'#a0522d\',
  \'silver\': \'#c0c0c0\',
  \'skyblue\': \'#87ceeb\',
  \'slateblue\': \'#6a5acd\',
  \'slategray\': \'#708090\',
  \'snow\': \'#fffafa\',
  \'springgreen\': \'#3cb371\',
  \'steelblue\': \'#4682b4\',
  \'tan\': \'#d2b48c\',
  \'teal\': \'#008080\',
  \'thistle\': \'#d8bfd8\',
  \'tomato\': \'#ff6347\',
  \'turquoise\': \'#40e0d0\',
  \'violet\': \'#ee82ee\',
  \'wheat\': \'#f5deb3\',
  \'white\': \'#ffffff\',
  \'whitesmoke\': \'#f5f5f5\',
  \'yellow\': \'#ffff00\'


const rgbReg = /\\s*rgb\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)\\s*/
const rgbaReg = /\\s*rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)\\s*/
const hexReg = /\\s*#([0-9a-fA-F]3|[0-9a-fA-F]6)\\s*/

export function getRgbColor(colorString) 
  if (rgbReg.test(colorString) || rgbaReg.test(colorString)) 
    return colorString.replace(/\\s*/g, \'\')
  
  if (hexReg.test(colorString)) 
    let hex = colorString.replace(/\\s*/g, \'\')
    if (hex.length === 4) 
      hex = hex.replace(/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/g, \'#$1$1$2$2$3$3\')
    
    hex = hex.replace(\'#\', \'0x\')
    return `rgb($[(hex & 0xff0000) >> 16, (hex & 0xff00) >> 8, hex & 0xff].join(\',\'))`
  
  const color = name2rgbMap[colorString.toLowerCase()]
  if (color) 
    return color
  
  return null


export function getHexColor(colorString) 
  if (hexReg.test(colorString)) 
    return colorString.replace(/\\s*/g, \'\')
  
  if (rgbReg.test(colorString) || rgbaReg.test(colorString)) 
    colorString = colorString.replace(/\\s*/g, \'\')
    let color = colorString.match(rgbReg) || colorString.match(rgbaReg)
    // color[0] is the whole string, [1, 2, 3] is the rgb
    let r = parseInt(color[1]) & 0xff
    let g = parseInt(color[2]) & 0xff
    let b = parseInt(color[3]) & 0xff
    const format = (num) => 
      const str = num.toString(16)
      return str.length === 1 ? `0$str` : str
    
    return `#$[r, g, b].map(format).join(\'\')`
  
  const color = name2hexrgbMap[colorString.toLowerCase()]
  if (color) 
    return getHexColor(color)
  
  return null


export default 
  getRgbColor,
  getHexColor

使用正则将十六进制颜色值解析为rgb三通道

// 将十六进制的颜色值转为rgb 包括#eee（简写）或者#63FFCB（全写）的情况
function hexToRgb(color) {
    var result = /^#?([a-f\\d]{1,2})([a-f\\d]{1,2})([a-f\\d]{1,2})$/i.exec(color);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

let color = hexToRgb("#63FFCB");
console.log(color); // {r:99, g:255, b:203}
let colorRgb = `rgb(${color.r},${color.g},${color.b})`;
console.log("转成rgb：", colorRgb); // rgb(99,255,203)

在线转换工具测试的转换结果：