Getting the RGB values for a CSS/HTML named color in JavaScript

Question

I've built a name-[rgb] Javascript object. Your basic:

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

object. But it occurred to me that I should be able to take a name string, "AliceBlue", say .. and have JavaScript find some sort of RGB representation of it (hex is fine). I know there are at least 140 named colors tucked away in the browser, but I can't seem to find them.

Is there a CSS or "style=..." stunt that lets me look up an RGB representation of a color name?

Answer 1

Minimal JavaScript function:

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

This is the solution I ended up with. I realized that colors came in two types: css strings and webgl typed arrays (usually 4 floats or ints, depending).

Hell with it, let the browser figure it: create a 1x1 canvas, fill it with any string color, grab the pixel, and destructure into an rgba array. There are two utilities below that create the 1x1 2d canvas ctx, attached.

# 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

What I love about it is that The Browser Speaks For Itself. Any legal string works just fine. Only downside is that if the string is illegal you get black, so need to do a few checks. The error checking is not great, but I don't need it in my usage.

The utility functions:

# 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 ，该库返回颜色名称的 hex 或 rgb 值。

Answer 4

You can use a canvas to get the RGBA color from a name.

Please look at this fiddle: 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);

This is how jp_doodle does color interpolation in transitions: https://aaronwatters.github.io/jp_doodle/080_transitions.html

Answer 5

The following might do the trick if you have an integer representation:

function getHex(color){
    return "#"+color.map(function(x){return x.toString(16).toUpperCase();}).join("");
}

Here is the Fiddle .

For the rest, you could create an element and take its colour.

el=document.createElement("DIV");
el.style.backgroundColor="aliceblue";
console.log(el.style.backgroundColor);

Fiddle for that

Answer 6

Other approaches on this page use HTML5 Canvas .

But it's straightforward (once you know how) to derive the rgb() value from a color keyword simply by inspecting standard <div> .

The method used to resolve the rgb() value in this approach is:

• window.getComputedStyle()

---

Working Example:

 const colorKeywordToRGB = (colorKeyword) => { // CREATE TEMPORARY ELEMENT let el = document.createElement('div'); // APPLY COLOR TO TEMPORARY ELEMENT el.style.color = colorKeyword; // APPEND TEMPORARY ELEMENT document.body.appendChild(el); // RESOLVE COLOR AS RGB() VALUE let rgbValue = window.getComputedStyle(el).color; // REMOVE TEMPORARY ELEMENT document.body.removeChild(el); return rgbValue; } // BASIC COLORS console.log('red:', colorKeywordToRGB('red')); console.log('green:', colorKeywordToRGB('green')); console.log('yellow:', colorKeywordToRGB('yellow')); console.log('blue:', colorKeywordToRGB('blue')); // SIMPLE COLORS console.log('fuchsia:', colorKeywordToRGB('fuchsia')); console.log('lime:', colorKeywordToRGB('lime')); console.log('maroon:', colorKeywordToRGB('maroon')); console.log('navy:', colorKeywordToRGB('navy')); console.log('olive:', colorKeywordToRGB('olive')); console.log('purple:', colorKeywordToRGB('purple')); console.log('teal:', colorKeywordToRGB('teal')); console.log('transparent:', colorKeywordToRGB('transparent')); // ADVANCED COLORS console.log('blanchedalmond:', colorKeywordToRGB('blanchedalmond')); console.log('coral:', colorKeywordToRGB('coral')); console.log('darkorchid:', colorKeywordToRGB('darkorchid')); console.log('firebrick:', colorKeywordToRGB('firebrick')); console.log('gainsboro:', colorKeywordToRGB('gainsboro')); console.log('honeydew:', colorKeywordToRGB('honeydew')); console.log('papayawhip:', colorKeywordToRGB('papayawhip')); console.log('seashell:', colorKeywordToRGB('seashell')); console.log('thistle:', colorKeywordToRGB('thistle')); console.log('wheat:', colorKeywordToRGB('wheat'));

---

Further Reading:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle