All of the available CSS color names | Hacker News Reader

All of the available CSS color names

147colors.com

55 pointskrogsgard27 comments

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.)

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.

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?

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.

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 :)

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.

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!

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.

What if he were writing straight CSS, though? No possibility for variables there. (Not yet, at least.)

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).

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

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.

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.

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

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

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...

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

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

http://contrastrebellion.com/

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

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.

The font size change when I reload is rather irritating.

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.

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?

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

This actually works! :)

Cute.

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

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.

Reply on news.ycombinator.com