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