问正在验证html颜色代码

EN

if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(str)) {
    //Match
}

if (/^rgb\s*(\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*)$/i.test(str)) {
    //Match
}

function validate_color(c) {
    var litmus = 'red';
    var d = document.createElement('div');
    d.style.color=litmus;
    d.style.color=c;
    //Element's style.color will be reverted to litmus or set to '' if an invalid color is given
    if( c !== litmus && (d.style.color === litmus || d.style.color === '')){
        return false;
    }
    return true;
}

   import validateColor from 'validate-color';

   import React from 'react';
   import validateColor from 'validate-color';

   const ColorBox = props => {
     const {
       color = '',
       text = ''
     } = props;
     const theColor = color && validateColor(color) ? color : 'transparent';
     return (
       <div className="color-box" style={{backgroundColor: theColor}}>
         <p>{text}</p>
       </div>
     )
   };

   export default ColorBox;

   import { validateHTMLColor } from 'validate-color';

   import { validateHTMLColorHex } from 'validate-color';

   import { validateHTMLColorName } from 'validate-color';