在 JavaScript 中获取名为 color 的 CSS/HTML 的 RGB 值

Question

我已经构建了一个 name-[rgb] Javascript 对象。你的基本：

namedColors = {
  AliceBlue: [240, 248, 255],
  AntiqueWhite: [250, 235, 215],
  ...

对象。但我突然想到，我应该能够取一个名称字符串“AliceBlue”，比如说.. 并让 JavaScript 找到它的某种 RGB 表示形式（十六进制很好）。我知道浏览器中至少有 140 种命名颜色，但我似乎找不到它们。

是否有 CSS 或“style=...”特技让我可以查找颜色名称的 RGB 表示？

Answer 1

最小的 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;
}

Answer 2

这是我最终得到的解决方案。我意识到颜色有两种类型：css 字符串和 webgl 类型的数组（通常是 4 个浮点数或整数，具体取决于）。

见鬼去吧，让浏览器想办法：创建一个 1x1 画布，用任何字符串颜色填充它，抓取像素，然后解构为 rgba 数组。下面有两个实用程序可以创建 1x1 2d 画布 ctx，附后。

# Return an RGB array given any legal CSS color, null otherwise.
# http://www.w3schools.com/cssref/css_colors_legal.asp
# The string can be CadetBlue, #0f0, rgb(255,0,0), hsl(120,100%,50%)
# The rgba/hsla forms ok too, but we don't return the a.
# Note: The browser speaks for itself: we simply set a 1x1 canvas fillStyle
# to the string and create a pixel, returning the r,g,b values.
# Warning: r=g=b=0 can indicate an illegal string.  We test
# for a few obvious cases but beware of unexpected [0,0,0] results.
ctx1x1: u.createCtx 1, 1 # share across calls. closure wrapper better?
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

我喜欢它的地方在于浏览器会说话。任何合法的字符串都可以正常工作。唯一的缺点是如果字符串是非法的，你会得到黑色，所以需要做一些检查。错误检查不是很好，但我在使用中不需要它。

实用功能：

# Create a new canvas of given width/height
createCanvas: (width, height) ->
  can = document.createElement 'canvas'
  can.width = width; can.height = height
  can
# As above, but returing the context object.
# Note ctx.canvas is the canvas for the ctx, and can be use as an image.
createCtx: (width, height) ->
  can = @createCanvas width, height
  can.getContext "2d"

Answer 3

使用函数“name2hex”和“name2rgb”查看Colors.js，该库返回颜色名称的十六进制或RGB值。

Answer 4

您可以使用画布从名称中获取 RGBA 颜色。

请看这个小提琴：https://jsfiddle.net/AaronWatters/p1y298zk/19/

// We want to know the rgba values for this color name:
var testColor = "salmon"

// make a canvas
var canvas = $('<canvas width="100px" height="100px">');

// optional: display the canvas
var body = $(document.body);
canvas.appendTo(body);

// draw a rectangle on the canvas
var context = canvas[0].getContext("2d");
context.beginPath();
context.rect(0,0,100,100);
context.fillStyle = testColor;
context.fill();

// get the canvas image as an array
var imgData = context.getImageData(0, 0, 10, 10);
// rbga values for the element in the middle
var array = imgData.data.slice(50*4, 50*4+4);
// convert the opacity to 0..1
array[3] = array[3] / 255.0;

$("<div>The rgba for " + testColor + " is " + array + "</div>").appendTo(body);

这就是 jp_doodle 在过渡中进行颜色插值的方式：https://aaronwatters.github.io/jp_doodle/080_transitions.html