views:

160

answers:

2

There are places to get lists of HTML or X11 colour names and their RGB equivalents. For instance we can find that "Aquamarine" is "#70DB93". Presumably the browsers know the mappings. Is there a way to use javascript to interrogate the browser and get a list of which colour names it supports (along with the RGB the browser plans on using)?

A: 

These color names that browsers like Firefox support are not HTML color names but X11 color names.

Wikipedia has a list of these colors with samples, so you can determine if a browser supports them.

I'll do some poking around to see at what point Firefox (as an example) adds this support to see if you can query for it via js.

Anthony
There are cases where the X11 names disagree with the browser, so you shouldn't think of them that way. They are indeed HTML/CSS color names.
Jed Smith
I modified the question to cover the HTML and X11 bases. The Wikipedia indicates that X11 was source but there are some minor disagreements between HTML and X11 colours which, in an ideal world, wouldn't exist.
Andrew
I meant in cases where they aren't defined in CSS standard. And the names, as far as I know, are X11, even if the browser doesn't use either standard.
Anthony
+1  A: 

These are meta to Javascript (they're used in CSS, amongst other things), and as a result I doubt they're queryable in that form.

Here's a list of the ones all browsers should know: CSS Color Names

From that page:

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.

EDIT: Since you asked, I checked if this is doable with Safari at least. I was able to do this (I threw this together in minutes, bear with it):

<html>
<head>
    <title>Color Test</title>
    <script type="text/javascript">
        function $(id) { return document.getElementById(id); }
        function do_chocolate() {
            $("foo").style.color = "chocolate";
            alert($("foo").style.color);
        }
    </script>
</head>
<body>
    <div id="foo">
        This should change when you click below
    </div>
    <a href="#" onclick="do_chocolate();">Click me</a>
</body>

Safari shows me this alert when I click:

rgb(210, 105, 30)

I'm not familiar enough with Javascript to probe that color, but it looks like it can be done. If I were in a hurry on this project, I'd just stringize the color (like Safari did to display that alert to me) and grab each part. Since this is Javascript/DOM, however, I know there's a way to get in there and get each color component, but I don't know what it is. At least I've set you down the path, no?

Jed Smith
What about if I knew the color name - I could use Javascript to apply that colour via css to an object. Could I then somehow find out the RGB the browser was using to render it?
Andrew
Yes. I'll revise the answer.
Jed Smith
I don't think they are queryable based on what I didn't find using Google, but I figured that maybe someone knows something that I don't.
Andrew
Thanks Jed. The original question assumed a lack of knowledge of the colour name but I doubt the browser can be coerced into giving that up. This does the name->RGB conversion if you at least have the name. Thanks, accepted.
Andrew