How can I get rgb (or hex) code from css color-name in javascript?

Question

I am making a canvas gauge plugin and I need to convert css color codes like 'pink' and 'orange' into RGB format.

I thought of setting some element to background: pink; and the getting that color back with $('el').css('background'); like this but I don't know if that would always return what i want and it seems weird anyway.

I am hoping there is some built in window method or something that can do this conversion for me without me having to include a big map-object for all the codes.

possible duplicate of [Javascript function to convert color names to hex codes](http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes) — Michelle Tilley, Oct 08 '13 at 22:54
http://jsfiddle.net/watson/NFeWm/ this works ... ridiculous tho — dezman, Oct 08 '13 at 22:56
@BrandonTilley yeah... not a duplicate, cuz id rather use the solution in my last comment — dezman, Oct 08 '13 at 22:58
there is no easy way to do ... and as far as i know browsers give different values for color names some times (i believe i read that once some where) — Hussein Nazzal, Oct 08 '13 at 22:59
how many colors are you going to deal with? No reason to try and avoid the map object if instead you use a conversion script that is 5 times bigger! — Christophe, Oct 08 '13 at 23:00
@Christophe well maybe i will do the map, but i can get the code using the technique in the fiddle with a couple lines — dezman, Oct 08 '13 at 23:01
@watson well, I thought you didn't like that one :-) btw I just tried it in IE 10... — Christophe, Oct 08 '13 at 23:03
@Christophe yea... i dont like it, but ill use it maybe, i was just hoping there was a built-in method i didn't know about to do this. :) — dezman, Oct 08 '13 at 23:05
There's not a built in function for this, and there are cross browser issues as some older browsers will return hex, and some modern browsers rgba etc. I'd do it like this -> http://jsfiddle.net/SGjyL/1/ but note that basic colors with wide support will not return rgb but the color name in Chrome etc, so you might need a map as well. There are libraries to check the color format returned, and convert hex, hsl etc. to rgb. — adeneo, Oct 08 '13 at 23:20
https://github.com/jquery/jquery-color/blob/master/jquery.color.js has some exciting code to parse the potential formats — stevemarvell, Oct 08 '13 at 23:32

score 1 · Answer 1 · answered Jun 29 '22 at 22:37

I need to convert css color codes like 'pink' and 'orange' into RGB format [...] I am hoping there is some built in window method or something that can do this conversion for me without me having to include a big map-object for all the codes.

Yes, there is. The method you are looking for is window.getComputedStyle()

You can run through the following steps:

create a standard <div>
add the color to the style object of the <div>
append the <div> to the DOM
use window.getComputedStyle() to inspect the computed styles of the <div>

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;
}

console.log('pink:', colorKeywordToRGB('pink'));
console.log('orange:', colorKeywordToRGB('orange'));

Further Reading:

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

``document.body.append(el)`` and ``el.remove()`` will do. Internet Explorer (which didn't have those methods) is dead. — Danny '365CSI' Engelman, Jul 02 '22 at 09:26

score 0 · Answer 2 · edited Oct 09 '13 at 17:25

0

github.com/jquery/jquery-color/blob/master/jquery.color.js

may be the processing library you are after.

edited Oct 09 '13 at 17:25

Ilya

29,135
19
110
158

answered Oct 09 '13 at 16:58

stevemarvell

981
1
6
16

That code is twice as long as the plugin im building, id rather accept an answer that says "what you want is not possible, and your going to have to include a map object (which would only be ~ 100 or 200 lines)" Plus jquer.color only has support for around 20 color names, which is not enough. – dezman Oct 09 '13 at 17:02
I'm sure that you you update it and put in a pull request, but if it doesn't suit your purpose, maybe it would suit others. – stevemarvell Oct 09 '13 at 17:05
Unfortunately, I have no interest in blending or adjusting saturation or hue2rgb or any of the functions of jquery.color except the scanty 20 line map object at the end. – dezman Oct 09 '13 at 17:09

How can I get rgb (or hex) code from css color-name in javascript?

2 Answers2