Is there a way to get the hexadecimal value of any CSS color?

Question

Real problematic

Write a function that returns the color value from any CSS color OR from a color defined by a class

Initial formulation

I would like to know if a string passed in parameter to my function is a color - answering only that would already be great - and then to know its hex value.

So I have defined a regex to find out if the string is something like #fff or also rgb(0,0,0), but it doesn't catch CSS standard colors such as black and white. Should I test each color name or is there any way or preexisting function to do that ? Thanks.

Solution personally used

If you want dot-preceded class names such as ".myClass"

function getColor(classOrColor) {
    if(classOrColor[0] === '.') {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor.split('.').join(' ') + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

Usage examples:

getColor('yellow')
getColor('#abc')
getColor('rgb(1,2,3)')
getColor('.myClass .myOtherClass')

Solution based on mplungjan's answers

If you want plain class names such as "myClass"

Search if a class with this name exists using this answer: https://stackoverflow.com/questions/983586/...

Then call the same function (with minor modification)

function getColor(classOrColor) {
    if(classExists(classOrColor)) {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

Usage examples:

getColor('#abc')
getColor('myClass')

There doesn't seem to be an existing function http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes — Matt Zeunert, Feb 04 '13 at 10:09
I'm not sure the exact purpose of your needing these values so this may not apply, but SASS has a ton of color functions that do exactly what you're trying to do with javascript. You can input a hex value and return rgba or hsla. you can darken or lighten colors by percent, save variables, etc. in SASS: rgba(#fff, .1) returns-> rgba(255,255,255,.1) — DMTintner, Feb 04 '13 at 10:16
http://stackoverflow.com/questions/5429264/is-it-possible-to-determine-the-hex-value-of-a-named-color — Salman A, Feb 04 '13 at 10:20
@Matt's comment seems to cover my suggestion much more completely. — mplungjan, Feb 04 '13 at 10:24

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

You could use getComputedStyle - this does not work on IE8 and under.

Please see the answer to Javascript function to convert color names to hex codes for a better coverage than mine (saw it after I wrote it)

DEMO

function getRGB(str){
    var elem = document.createElement("div");
    elem.style.display="none";
    elem.style.color=str;
    document.body.appendChild(elem);
    return  window.getComputedStyle(elem,null).getPropertyValue("color");
  }
alert(getRGB("red"));

edited May 23 '17 at 12:22

Community

1
1

answered Feb 04 '13 at 10:10

mplungjan

169,008
28
173
236

I think it would just get "red" in IE – mplungjan Feb 04 '13 at 10:26
I already thought of something like that (using jQuery instead), but the problem is that if the string is wrong like `inexistant-color`, it returns the parent's color. If you can tell me a way to know if the color actually exists I'll accept your answer. The purpose of all of that is that I want to be able to send a class name to my function instead of a color. – floribon Feb 04 '13 at 10:40
Not without a lookup table. But can you elaborate on "I want to be able to send a class name to my function instead of a color" ? – mplungjan Feb 04 '13 at 10:55
I mean that currently I can pass "danger-class" to this function so that if I manage to detect that it is not a CSS color value (and this is the issue), I instantiate some div with this class name and returns its color (in a similar manner that you do with getComputedStyle). I hope you understand me, my English is so weak.. – floribon Feb 04 '13 at 11:02
1

Hmm, that means that you expect that there IS a class with that name. So if you have `` you want to have red returned if such a class exist. You can use http://stackoverflow.com/questions/983586/how-can-you-determine-if-a-css-class-exists-with-javascript to first find if a class exists with that name and then take its color if there. This will work unless you have `.red { color:blue }` or something silly – mplungjan Feb 04 '13 at 12:33
That's exactly what I was looking for. After a little talk with my +1, I decided to handle class names only if they are preceded by a dot as in ".danger-class", but thank you! – floribon Feb 04 '13 at 15:44

Is there a way to get the hexadecimal value of any CSS color?

Real problematic

Initial formulation

Solution personally used

Solution based on mplungjan's answers

1 Answers1