let colorNameMap = {
aliceblue : '#f0f8ff',
antiquewhite : '#faebd7',
aqua : '#00ffff',
aquamarine : '#7fffd4',
azure : '#f0ffff',
beige : '#f5f5dc',
bisque : '#ffe4c4',
black : '#000000',
blanchedalmond : '#ffebcd',
blue : '#0000ff',
blueviolet : '#8a2be2',
brown : '#a52a2a',
burlywood : '#deb887',
cadetblue : '#5f9ea0',
chartreuse : '#7fff00',
chocolate : '#d2691e',
coral : '#ff7f50',
cornflowerblue : '#6495ed',
cornsilk : '#fff8dc',
crimson : '#dc143c',
cyan : '#00ffff',
darkblue : '#00008b',
darkcyan : '#008b8b',
darkgoldenrod : '#b8860b',
darkgray : '#a9a9a9',
darkgrey : '#a9a9a9',
darkgreen : '#006400',
darkkhaki : '#bdb76b',
darkmagenta : '#8b008b',
darkolivegreen : '#556b2f',
darkorange : '#ff8c00',
darkorchid : '#9932cc',
darkred : '#8b0000',
darksalmon : '#e9967a',
darkseagreen : '#8fbc8f',
darkslateblue : '#483d8b',
darkslategray : '#2f4f4f',
darkslategrey : '#2f4f4f',
darkturquoise : '#00ced1',
darkviolet : '#9400d3',
deeppink : '#ff1493',
deepskyblue : '#00bfff',
dimgray : '#696969',
dimgrey : '#696969',
dodgerblue : '#1e90ff',
firebrick : '#b22222',
floralwhite : '#fffaf0',
forestgreen : '#228b22',
fuchsia : '#ff00ff',
gainsboro : '#dcdcdc',
ghostwhite : '#f8f8ff',
gold : '#ffd700',
goldenrod : '#daa520',
gray : '#808080',
grey : '#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 : '#e0ffff',
lightgoldenrodyellow : '#fafad2',
lightgray : '#d3d3d3',
lightgrey : '#d3d3d3',
lightgreen : '#90ee90',
lightpink : '#ffb6c1',
lightsalmon : '#ffa07a',
lightseagreen : '#20b2aa',
lightskyblue : '#87cefa',
lightslategray : '#778899',
lightslategrey : '#778899',
lightsteelblue : '#b0c4de',
lightyellow : '#ffffe0',
lime : '#00ff00',
limegreen : '#32cd32',
linen : '#faf0e6',
magenta : '#ff00ff',
maroon : '#800000',
mediumaquamarine : '#66cdaa',
mediumblue : '#0000cd',
mediumorchid : '#ba55d3',
mediumpurple : '#9370db',
mediumseagreen : '#3cb371',
mediumslateblue : '#7b68ee',
mediumspringgreen : '#00fa9a',
mediumturquoise : '#48d1cc',
mediumvioletred : '#c71585',
midnightblue : '#191970',
mintcream : '#f5fffa',
mistyrose : '#ffe4e1',
moccasin : '#ffe4b5',
navajowhite : '#ffdead',
navy : '#000080',
oldlace : '#fdf5e6',
olive : '#808000',
olivedrab : '#6b8e23',
orange : '#ffa500',
orangered : '#ff4500',
orchid : '#da70d6',
palegoldenrod : '#eee8aa',
palegreen : '#98fb98',
paleturquoise : '#afeeee',
palevioletred : '#db7093',
papayawhip : '#ffefd5',
peachpuff : '#ffdab9',
peru : '#cd853f',
pink : '#ffc0cb',
plum : '#dda0dd',
powderblue : '#b0e0e6',
purple : '#800080',
rebeccapurple : '#663399',
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',
slategrey : '#708090',
snow : '#fffafa',
springgreen : '#00ff7f',
steelblue : '#4682b4',
tan : '#d2b48c',
teal : '#008080',
thistle : '#d8bfd8',
tomato : '#ff6347',
turquoise : '#40e0d0',
violet : '#ee82ee',
wheat : '#f5deb3',
white : '#ffffff',
whitesmoke : '#f5f5f5',
yellow : '#ffff00',
yellowgreen : '#9acd32',
}
// 5种模式 全部转换程 'RRGGBBAA'的小写表示
// 1、颜色名,如'red','black'
// 2、三位十六进制,如'#fba'
// 3、六位十六进制, 如'#ffbbaa'
// 4、rgb ,如rgb(255,220,123)
// 5、rgba,如rgba(255,220,123,30)
function convertStringToHexColor(colorStr)
{
let BLACK = '000000ff'
if (typeof colorStr !== 'string' || colorStr.length <= 1) {
return BLACK; //非法,返回黑色
}
colorStr = colorStr.toLowerCase();
if ( colorStr.slice(0,1) === '#') //十六进制
{
colorStr = colorStr.slice(1)
if(colorStr.length < 4) //三位 FFF
{
if(colorStr.length < 3){
colorStr = ('000' + colorStr).slice(-3);
}
return colorStr.charAt(0).concat(colorStr.charAt(0),
colorStr.charAt(1),
colorStr.charAt(1),
colorStr.charAt(2),
colorStr.charAt(2),
'ff');
}
else //六位 ffbbaa
{
if(colorStr.length < 3){
colorStr = ('000000' + colorStr).slice(-6);
}
return colorStr + 'ff';
}
}
else if ( colorStr.length > 4 && colorStr.slice(0,4) === 'rgba') // rgba(1,2,3,4)
{
let start = colorStr.indexOf('(');
let end = colorStr.indexOf(')');
if (start === -1 || end === -1 || (start+1) >= end ) {
return BLACK
}
rgb = colorStr.slice(start + 1,end).split(',');
if (rgb.length !== 4) {
return BLACK;
}
return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
parseInt(rgb[1]).toString(16).slice(-2),
parseInt(rgb[2]).toString(16).slice(-2),
parseInt(rgb[3]).toString(16).slice(-2));
}
else if ( colorStr.length > 3 && colorStr.slice(0,3) === 'rgb' ) //rgb(1,2,3)
{
let start = colorStr.indexOf('(');
let end = colorStr.indexOf(')');
if (start === -1 || end === -1 || (start+1) >= end ) {
return BLACK
}
rgb = colorStr.slice(start + 1,end).split(',');
if (rgb.length !== 3) {
return BLACK;
}
return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
parseInt(rgb[1]).toString(16).slice(-2),
parseInt(rgb[2]).toString(16).slice(-2),
'ff');
}
else if (colorNameMap[colorStr] !== undefined)
{
colorStr = colorNameMap[colorStr].slice(1);
return colorStr + 'ff';
}
else{
return BLACK; //非法,返回黑色
}
}
console.log(convertStringToHexColor(''))
console.log(convertStringToHexColor('#'))
console.log(convertStringToHexColor('red'))
console.log(convertStringToHexColor('#FBA'))
console.log(convertStringToHexColor('#FFBBAA'))
console.log(convertStringToHexColor('rgb(255,254,253)'))
console.log(convertStringToHexColor('rgba(255,254,253,100)'))