我已经建立了一个名为[name-rgb]的Javascript对象。你的基本:
namedColors = {
AliceBlue: [240, 248, 255],
AntiqueWhite: [250, 235, 215],
...
对象。但我意识到我应该能够输入一个名字字符串,比如"AliceBlue",然后让JavaScript找到它的某种RGB表示(十六进制也可以)。我知道浏览器中至少有140个隐藏的命名颜色,但我似乎找不到它们。
有没有一种CSS或者"style=..."的技巧可以让我查找一个颜色名字的RGB表示?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这是我最终得出的解决方案。我意识到颜色有两种类型:css字符串和webgl类型数组(通常是4个浮点数或整数,具体取决于情况)。
算了,让浏览器自己处理吧:创建一个1x1的画布,用任何字符串颜色填充它,获取像素,并将其解构为rgba数组。下面有两个实用工具,用于创建1x1的2d画布ctx。
#根据任何合法的CSS颜色返回一个RGB数组,否则返回null。 #http://www.w3schools.com/cssref/css_colors_legal.asp #字符串可以是CadetBlue,#0f0,rgb(255,0,0),hsl(120,100%,50%) #rgba/hsla形式也可以,但我们不返回a。 #注意:浏览器自己说话:我们只需将1x1的画布fillStyle设置为字符串并创建一个像素,返回r,g,b值。 #警告:r=g=b=0可能表示非法字符串。我们测试了一些明显的情况,但要注意意外的[0,0,0]结果。 ctx1x1: u.createCtx 1, 1 #跨调用共享。闭包封装更好吗? stringToRGB: (string) -> @ctx1x1.fillStyle = string @ctx1x1.fillRect 0, 0, 1, 1 [r, g, b, a] = @ctx1x1.getImageData(0, 0, 1, 1).data return [r, g, b] if (r+g+b isnt 0) or (string.match(/^black$/i)) or (string in ["#000","#000000"]) or (string.match(/rgba{0,1}\(0,0,0/i)) or (string.match(/hsla{0,1}\(0,0%,0%/i)) null我喜欢它的地方在于浏览器自己说话。任何合法的字符串都可以正常工作。唯一的缺点是,如果字符串非法,你会得到黑色,所以需要做一些检查。错误检查不是很好,但在我的使用中不需要它。
实用工具函数:
最简单的JavaScript函数:
function nameToRgba(name) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); context.fillStyle = name; context.fillRect(0,0,1,1); return context.getImageData(0,0,1,1).data; }