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

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
}