All of the available CSS color names

http://www.147colors.com/

by krogsgard • 14 years ago

55 27 14 years ago

cubicle• 14 years ago

Cute.

Kinda annoying that it loads all its page content from www.colors.commutercreative.com, which RequestPolicy blocks by default, being an external domain.

krogsgard• 14 years ago

I'm assuming the two are one in the same, with 147 colors being just an easy way to remember it. Either way, it's a clever display.

I really wish it was easy to permalink something though. Took me a few seconds to at least figure out I could manually grab a url like this http://www.147colors.com/darkslategrey/ - but when you click from the grid it doesn't permalink.

sbarre• 14 years ago

If it's really a tool to help designers, don't hide all the colour names on the list. Just let us look at the whole list with all the names and colours at a glance and make it easy to browse.

wbobeirne• 14 years ago

While I agree with you, I think the desired flow of that page is that you quickly scan, and when you see something you like, you hover over it. Having text on each color may distract the user's eyes to read all of the names.

zapt02• 14 years ago

Why not make it an option? I too would much prefer to see all the names at all times.

sp332• 14 years ago

Try this one? http://www.somacon.com/p142.php/

TazeTSchnitzel• 14 years ago

The font size change when I reload is rather irritating.

DanBC• 14 years ago

The drop shadow needs to be darker to allow the names of the light colours to be read more easily.

But it's a lovely page, thank you.

jarek-foksa• 14 years ago

There are 147 color names, but the number of colors in CSS3 spec is a bit smaller because of duplicates (e.g. gray and grey are the same color).

I would rather prefer to comment my code than use some of the more convoluted names. In CSS3 we can also specify colors with HSL format which is more natural and universal than made-up names.

crazygringo• 14 years ago

Does anyone ever actually use CSS color names in production except for "white" and "black"? Unless you throw in a "border: 1px solid red" for debugging to see the box around an element?

After all, the remaining 145 colors only account for 0.00086% of colors a designer might pick in Photoshop.

It's like winning the lottery :)

gojomo• 14 years ago

I use the names regularly. I use colors sparingly for fuzzy (but consistent) connotations/highlights. The named subset is good enough for that purpose, and easier to remember than every shade that might be cooked up in another tool.

simonsarris• 14 years ago

Well I found at least one good use for them.

I'm writing a book and I use nothing but the CSS color names in all of the examples. I think it makes the code snippets easier to parse and visualize as a human when you're reading through the text. For example:

  // Create a vertical gradient going from the top of the canvas to the bottom
  var gradient = ctx.createLinearGradient(0, 0, 0, can.height);
  gradient.addColorStop(0, 'Black');
  gradient.addColorStop(0.15, 'Black');
  gradient.addColorStop(0.2, 'DarkSeaGreen');
  gradient.addColorStop(0.4, 'DarkSeaGreen');
  gradient.addColorStop(0.7, 'Goldenrod');
  gradient.addColorStop(0.8, 'DarkOrange');
  gradient.addColorStop(1, 'GhostWhite');

Then, as I spend a paragraph talking about color stops, I can refer to real color names and not #00000, #8FBC8F, etc. I think the humans reading the text will appreciate it, but we'll see!

jacobolus• 14 years ago

If you’re referring to these by strings, wouldn’t you be just as well off spending a few lines of code somewhere above setting up some variables for hex colors? This seems like a pretty trivial kind of advantage.

lazerwalker• 14 years ago

This is especially true when you're using a CSS preprocessor like LESS or SASS. It's easier to remember a name like "skyBlue" or "tomato" than a hex value, sure, but being able to declare your own variable names is just as good (if not better).

zachrose• 14 years ago

Gotta love dodgerBlue, aqua, fuschia and teal for miscellaneous debugging and demoing.

mgcross• 14 years ago

I wasn't even aware CSS3 added 130 color keywords. I like the larger size of the chips used here, but prefer the labeled list on MDN: https://developer.mozilla.org/en/CSS/color_value#Color_Keywo...

notJim2• 14 years ago

This is kind of pretty, but actually rather annoying from a UI perspective. Here is some feedback, which is just like, my opinion, man.

For one, there's the mystery meat navigation. If it's a visual directory of all color names, why not start there? Or start by showing one color and then rapidly "zooming" out to show an overview. I'm guessing you're going for some kind of serendipity right now, where I would refresh repeatedly and be treated to delightful colors. Maybe you could find a middle ground where there's still some serendipity, but it's also easier to navigate.

The transitions on the titles are also too slow. I know how it can be when you're staring at these things for a while, it can be hard to judge. Consider that when I mouse over a color, it's because I want to see the color name (which is, after all, the only thing this does.) Therefore, you shouldn't make me wait half a second to see it. If you reduce to something more like an eighth of a second, there's still a nice effect, but I don't feel like I'm waiting.

Finally, the text on the light colors is about impossible to read. You've got the right idea with the text shadow, but it's too faint. Keep in mind that since monitor calibrations vary wildly, if you care about readability, you have to be conservative with your contrast. I will admit that I'm using a really crappy monitor that I've never calibrated right now (and I know for a fact that the color reproduction on it is way off.)

droithomme• 14 years ago

Not just your opinion man, I came to post about the poor mystery meat UI and the latency to see after hovering, but you saved me the time.

Really don't care for this trend of these sorts of inefficient interfaces that mostly broadcast the person is learning HTML5.

julien_c• 14 years ago

The whole thing is very, very slow. Why should it reload the whole page from the server each time I request a new random color?

notJim2• 14 years ago

I noticed that too, but I kind of felt it was harsh to criticize when the poster's server is being hammered by HN and so on.

I did notice that the requests were very large, however. I believe around half a megabyte, for such a simple concept.

masgui• 14 years ago

lot's of colors but no way to share. this site is pointless without pushState on the url like: http://www.147colors.com/Magenta

ddon• 14 years ago

This actually works! :)

pattern• 14 years ago

I find the table on Wikipedia [1] much more usable in that I can visually see the colors that I am choosing between side-by-side. Not to mention they are already roughly organized by color.

[1] http://en.wikipedia.org/wiki/Web_colors#X11_color_names

callmeed• 14 years ago

As a Giants fan, I'm shocked and appalled at the existence of "DodgerBlue"

dredmorbius• 14 years ago

And here is a list of all CSS colors you should use for body text: black.

http://contrastrebellion.com/

grandpoobah• 14 years ago

I personally don't find this useful at all, but for the love of god why does the page need to reload for something as simple as this?

All of the available CSS color names

Related Stories