如何检测颜色是RGB、HSL还是HEX格式？

Question

我有以下代码可以检测颜色是否为 HEX、RGB 或 HSL：

function detectColorFormat(color) {
  if (color.startsWith('#')) {
    return 'HEX';
  } else if (color.startsWith('rgb')) {
    return 'RGB';
  } else if (color.startsWith('hsl')) {
    return 'HSL';
  }
}

有没有一种方法可以实现相同的功能，而不必如此具体地输入颜色字符串？

例如，我们怎样才能做到这一点：

"ff0" //returns HEX
"#ff0" //returns HEX
"fffF00" // returns HEX

"250 50 10" //returns RGB
"250, 50, 10" //returns RGB
"rgb(250,50,10)" //returns RGB

"10,50%,80%" //returns HSL

如果还包含 RGBA 格式就更好了

Answer 1

还没有。 将来您可能能够使用CSS类型对象模型API，但即使在开始实现它的浏览器中，它也没有被广泛使用和完全实现。

目前，您必须使用与您的方法类似的方法（也许您可以使用正则表达式），但请记住，您也可以命名颜色（例如“红色”），它们是 CSS 中完全有效的颜色值.

Answer 2

检测给定颜色字符串的格式。 此函数检查输入颜色字符串以确定其格式。它支持检测HEX、RGB和HSL颜色格式。检测基于与每种颜色格式的预期模式匹配的正则表达式。如果输入与任何已知模式都不匹配，该函数将返回“未知”。

参数：字符串颜色。要分析以进行格式检测的颜色字符串。 返回：字符串。如果无法确定格式，则返回检测到的颜色格式为“HEX”、“RGB”、“HSL”或“未知”。

const detectColorFormat = (color) => {
    if (/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
        return 'HEX';
    } else if (/^rgb\((\d{1,3}%?,\s*){2}\d{1,3}%?\)$/i.test(color)) {
        return 'RGB';
    } else if (/^hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)$/i.test(color)) {
        return 'HSL';
    } else {
        return 'Unknown';
    }
};