这里有不同的选项：

1.使用虚元素

使用浏览器的验证。创建一个 dummy HTML元素，分配颜色并检查是否设置。这是目前为止最好的选择。这不仅更容易，而且还允许向前兼容。

function CheckValidColor(color) {
    var e = document.getElementById('divValidColor');
    if (!e) {
        e = document.createElement('div');
        e.id = 'divValidColor';
    }
    e.style.borderColor = '';
    e.style.borderColor = color;
    var tmpcolor = e.style.borderColor;
    if (tmpcolor.length == 0) {
        return false;
    }
    return true;
}

// function call
var inputOK = CheckValidColor('rgb( 0, 0, 255)');

字符串
这将为浏览器接受的所有颜色返回true，即使在您可能认为无效的情况下。

2.使用正则表达式捕获数字，并进行代码验证

如果你捕获了任何 * 看起来像数字 * 的东西，你将能够用IF clauses单独验证每个参数。这将使您能够向用户提供更好的反馈。

a）#hex：

^(#)((?:[A-Fa-f0-9]{3}){1,2})$

型
为了与以下表达式保持一致，还捕获了哈希。DEMO

B）rgb（）、rgba（）、hsl（）和hsla（）：

^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$

型
这将为函数和每个参数创建捕获。DEMO的

3.使用一个monster正则表达式进行验证：

不推荐使用此选项，主要是因为它很难阅读，它不能保证匹配所有用例，并且如果您尝试调试它，它会给予您头疼。下面的正则表达式验证允许的参数数量和范围。

a）#hex：^#(?:[A-Fa-f0-9]{3}){1,2}$DEMO
B）rgb（）：^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$DEMO
c）rgba（）：^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$DEMO
d）hsl（）：^hsl[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*[)]$DEMO
e）hsla（）：^hsla[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*,\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$DEMO
现在所有人一起：

使用上面的表达式，我们可以创建这个一行程序来验证所有法律的的颜色值：

^(?:#(?:[A-Fa-f0-9]{3}){1,2}|(?:rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}|hsl[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*|(?:rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}|hsla[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*,)\s*0*(?:\.\d+|1(?:\.0*)?)\s*)[)])$

型
DEMO字符串
或者正则表达式爱好者可以检查这个huge regex，有148个颜色名称。但我永远不会推荐使用这种模式。请使用第一个选项，创建一个虚拟元素，这是覆盖浏览器所有用例的唯一方法。

我不知道其他浏览器，但在 chrome 的颜色将只设置，如果它的有效：

var isValidColor = function(color) {
  var el = document.createElement('div');
  el.style.backgroundColor = color;
  return el.style.backgroundColor ? true : false;
};

console.log(isValidColor('#ff0000')); // true
console.log(isValidColor('rgb(0, 0)')); // false

字符串
不过，它也有它的缺陷，因为Chrome会自动舍入数字：

// 0, 0, 256 is not a valid color, but this says yes
console.log(isValidColor('rgb(0, 0, 256)')); // true

型

验证十六进制、RGB和HSL格式的颜色的函数：

function isValidColor(colorString) {

    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
    const rgbRegex = /^rgb(a)?\(\s*((25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*(,\s*\d+(\.\d+)?)?\)$/i;
    const hslRegex = /^hsla?\(\s*((360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*,\s*){2}(360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*(,\s*\d+(\.\d+)?)?\)$/i;

    if (hexRegex.test(colorString)) {
        return true; // Valid hex color
    } else if (rgbRegex.test(colorString)) {
        const values = colorString.match(/\d+(\.\d+)?/g); // Extract numeric values
        const isValid = values.every(value => value >= 0 && value <= 255); // Check if values are within range
        return isValid && (values.length === 3 || values.length === 4); // Valid RGB or RGBA color
    } else if (hslRegex.test(colorString)) {
        const values = colorString.match(/\d+(\.\d+)?/g); // Extract numeric values
        const isValid = values.every(value => value >= 0 && value <= 100); // Check if values are within range
        return isValid && (values.length === 3 || values.length === 4); // Valid HSL or HSLA color
    }

        return false; // Invalid color format
    }

    // Sample usage:
    console.log(isValidColor('#ff0000')); // true
    console.log(isValidColor('rgb(255, 0, 0)')); // true
    console.log(isValidColor('rgba(0, 0, 0, 0.5)')); // true
    console.log(isValidColor('hsl(120, 100%, 50%)')); // true
    console.log(isValidColor('invalidcolor')); // false

字符串