如何用JavaScript校验字符串是否为有效的CSS颜色？

算力阿峰

2026-5-15

校验CSS颜色名称（及所有合法颜色格式）的JavaScript方案

这确实是个很实用的需求——正则表达式能轻松校验十六进制、RGB/RGBA这类数字形式的CSS颜色，但遇到Green、DarkSlateGray这类颜色名称，或者要处理null、空字符串、随机乱码这类无效输入时，正则就不太好使了。

核心思路

利用浏览器本身的CSS解析能力：当你给DOM元素的style.color设置一个无效值时，浏览器会直接忽略这个赋值，保持style.color为空；如果是合法颜色（不管是名称还是数字格式），浏览器会正确解析并保留这个值。

我们可以用一个无需添加到DOM的轻量元素（比如Option）来做这个校验，完全不会污染页面结构。

最终实现代码

考虑到颜色名称可能是大小写混合的情况（比如Green、RED），我们特意添加了toLowerCase()来统一对比逻辑：

function isValidColor(strColor) {
  // 先处理null、空字符串这类边界情况
  if (!strColor) return false;
  var s = new Option().style;
  s.color = strColor;
  // 转小写后对比，兼容大小写混合的颜色名称
  return s.color === strColor.toLowerCase();
}