

All of the available CSS color names - krogsgard
http://www.147colors.com/

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

~~~
julien_c
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?

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

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

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

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

------
sbarre
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
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
Why not make it an option? I too would much prefer to see all the names at all
times.

------
mgcross
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...](https://developer.mozilla.org/en/CSS/color_value#Color_Keywords)

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

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

<http://contrastrebellion.com/>

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

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

------
TazeTSchnitzel
The font size change when I reload is rather irritating.

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

------
grandpoobah
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?

------
masgui
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
This actually works! :)

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

