I'm not sure what the intent is, and what other people do with it, but I thoroughly _love_ having these named colours for when I'm hacking and prototyping. I can just start typing out a colour and autocomplete will show me a list. But I don't find myself ever using them in production.<p>Also: Finally, a tool to help me decide between greenyellow and yellowgreen.
In case the named web colors aren't enough, we're making excellent progress naming every color in the RGB space.<p><a href="https://colornames.org/" rel="nofollow">https://colornames.org/</a>
Totally irrational, of course, and now set in stone for backwards compatibility. <a href="https://arstechnica.com/information-technology/2015/10/tomato-versus-ff6347-the-tragicomic-history-of-css-color-names/" rel="nofollow">https://arstechnica.com/information-technology/2015/10/tomat...</a><p>CSS Color Module Level 4 (draft) admits as much, and states "their use is <i>not encouraged</i>." <a href="https://www.w3.org/TR/css-color-4/#named-colors" rel="nofollow">https://www.w3.org/TR/css-color-4/#named-colors</a>
I'm picturing Bob Ross standing over this palette whispering "We're going to put a happy little div here with a shade of cornflowerblue".
Funny to me that how #FF0000 is named Red, #0000FF is named Blue, but #00FF00 is Lime. Maybe it was supposed to be RLB. Although Green is the canonical name for that color range, what we actually refer as Green in daily life is close to #008000.
I am a <i>very bad</i> designer but good verbally, and when I design, color names are how I remember differences<p>I especially like hue.tools -- not sure where they sourced their name set, but combos like gecko's dream + blood rush (interpolating to mochaccino) make life easier<p>people like me should 100% stick to backend and never produce anything that other people have to look at, but until I can afford a designer, the names keep me in the game<p>I wish sometimes for a database of 'product colors through the ages', with tags by brand identity and broad style family -- as an infant brand designer, this would help me a lot
<a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/" rel="nofollow">https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/</a><p>Time to resurface the most human side to CSS. She's in this color picker, too.
PSA: these named colors can be used to set the color of Philips Hue lights using voice assistants. Most of the X11 colors can be used. <a href="https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart" rel="nofollow">https://en.wikipedia.org/wiki/X11_color_names#Color_name_cha...</a>
Apropos color names, some related work:<p>[] Color map with meaningful names <a href="http://www.procato.com/rgb+index/" rel="nofollow">http://www.procato.com/rgb+index/</a>
[] The CNS Color Naming System <a href="https://www.xanthir.com/blog/b4JS1" rel="nofollow">https://www.xanthir.com/blog/b4JS1</a> <a href="https://en.wikipedia.org/wiki/Color_Naming_System" rel="nofollow">https://en.wikipedia.org/wiki/Color_Naming_System</a>
[] Universal Color Language, Level 3 Color Names <a href="https://johndecember.com/html/spec/colorucl.html" rel="nofollow">https://johndecember.com/html/spec/colorucl.html</a>
[] deriving color names from photos of rainbows: <a href="https://www.comfsm.fm/~dleeling/cis/hsl_rainbow.html" rel="nofollow">https://www.comfsm.fm/~dleeling/cis/hsl_rainbow.html</a>
[] determining color values by training on image searches: <a href="https://lear.inrialpes.fr/people/vandeweijer/color_names.html" rel="nofollow">https://lear.inrialpes.fr/people/vandeweijer/color_names.htm...</a>
[] <a href="https://github.com/ayushoriginal/Optimized-RGB-To-ColorName" rel="nofollow">https://github.com/ayushoriginal/Optimized-RGB-To-ColorName</a>
This is amazing .<p>Named colors have one incredible use case: as placeholders in teaching environments. In my CSS course, I’d much rather use “color: hotpink” than “color: hsl(345deg 90% 50%)” (when color isn’t the focus of the lesson)
This is great! For those who like this, you may also like <a href="https://enes.in/sorted-colors" rel="nofollow">https://enes.in/sorted-colors</a> which also does the named web colours.
Nice. Check out <a href="https://github.com/meodai/color-names" rel="nofollow">https://github.com/meodai/color-names</a> for a rather large (29888!) collection of hand picked colors in case you want to expand your project.
Which tool is used to create the circle distribution? I was trying to find a tool to create something like this one <a href="https://cdn.howmuch.net/content/images/1600/world-gdp-updated-f4f4.png" rel="nofollow">https://cdn.howmuch.net/content/images/1600/world-gdp-update...</a> which is similar in the sense of distributing the shapes inside the circle.
Could anyone help me?
Interesting how some colors are so close from each other, especially "Chartreuse" and "Lawngreen" (on my middle-end monitors, at least).
The colors look entirely muted on Firefox compared to Chrome (Windows 10).<p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox" rel="nofollow">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Rel...</a><p>I had to set gfx.color_management.mode to 0 for it to look correct.
Would be interesting to see one for this<p><a href="https://nipponcolors.com/" rel="nofollow">https://nipponcolors.com/</a>
This is great!<p>What is the visualization? How did you do the visualization? And where did you get the idea / what was your thinking leading to this really cool way to do it?<p>I love using web colors. It's basically all I use...I like that they're just there..and also you get "semantic css".<p>It will probably seem a dumb and naive question so I'm sorry, but...Looks like the blacks, whites and greys are compressed in the center, is that an accurate way to put it? Why is it like that? it's your project so it's not my place to tell you what to do, so I'm sorry to ask but would it be a bad idea to give a bit more space to the shades of grey / gray?
Cool way to learn some of these. Does anyone know why "Peru" is #CD853F, a brown?
It has nothing to do with the flag (which is red and white).<p>(Aside: the word "peru" in Portuguese means turkey, like the bird. I somehow doubt this is related.)
The progression of greys is fun. In order:<p><pre><code> Black
Dimgrey (hmm)
Grey
Darkgrey (huh, darkgrey is lighter than grey)
Silver (all righty)
Gainsboro (of course)
White
</code></pre>
That's 3 out of 7 making sense.
All the history of the css colors, and lots of humor:
<a href="https://www.youtube.com/watch?v=HmStJQzclHc" rel="nofollow">https://www.youtube.com/watch?v=HmStJQzclHc</a>
Feature request: letting the user provide their own data and maybe offering some presets; e.g. I'd like to see the XKCD color survey [1] as the base.<p>[1]: <a href="https://xkcd.com/color/rgb/" rel="nofollow">https://xkcd.com/color/rgb/</a> ; context: <a href="https://blog.xkcd.com/2010/05/03/color-survey-results/" rel="nofollow">https://blog.xkcd.com/2010/05/03/color-survey-results/</a> .
Why on earth do both lawngreen and chartreuse exist? I can barely if at all tell the difference on my phone screen.<p>Regardless, I love this, and love using named colors when prototyping.
Cool! I love it!<p>I made one of these years ago in alphabetical order (yea I know stupid). Yours is way better. I can make great use of it.<p>I use these colors 95% of the time. I call them my "FU colors" (except I user the NSFW pronunciation). Every time someone sees my work, they say either, "How retro," or "You should really hire a designer."<p>For functionality, they cover almost everything. For "higher purposes" they suck, but I never cared.<p>Thank you. An evening well spent!
Dodger blue has always bugged me... since the turn of the century. The css color it is not even particularly close. Too bright and unsaturated:<p><pre><code> team color: #005A9C
css name "dodgerblue": #1E90FF
</code></pre>
<a href="https://teamcolorcodes.com/los-angeles-dodgers-color-codes/" rel="nofollow">https://teamcolorcodes.com/los-angeles-dodgers-color-codes/</a>
I miss the vibrant<i>!!!</i> designs using only the 216 "web-safe" colors, like HotWired in the 1990s. :)<p><a href="https://en.wikipedia.org/wiki/Web_colors#Color_table" rel="nofollow">https://en.wikipedia.org/wiki/Web_colors#Color_table</a><p><a href="https://en.wikipedia.org/wiki/HotWired" rel="nofollow">https://en.wikipedia.org/wiki/HotWired</a>
So simple and so elegant.<p>Would it be a good idea to make the click copy the color in the clipboard? Not the color code, of course, in the spirit of the website.
Interesting to see that there are sections where rectangles of color spaces are aligned parallel to the circle middle. They always have one of the RGB elements set on "00" as the colors get more intense and the other 2 color elements get stronger
Why are they called "web" colours?<p>I understand that the term "web safe colour" is for colours that was within the space of 216 "safe colour" table, for displays that could only display 256 colours, but I think it's another matter?
A discussion of related color dictionaries.[1]<p>[1] <a href="https://people.csail.mit.edu/jaffer/Color/Dictionaries" rel="nofollow">https://people.csail.mit.edu/jaffer/Color/Dictionaries</a>
This seems such an obvious thing to do when you see it, but it is the first time I have seen it done.<p>It would be interesting to make this generic for any colour pallet. For example the 12 bit palette recently submitted to HN
Love it. One suggestion - make it so it either copies to your clipboard when you click a color, or add an explicit "copy" button so it's easier to grab the name.<p>But awesome stuff - the color wheel looks so cool.
I love this! I've had the 'Web colors' Wikipedia page in my bookmarks for years.<p>I often use them when I'm working on new designs and want to experiment on responsive layouts with colourful test elements.
Very cool.<p>Would be fun to add data visualisation, like "see how often those color are used" or "what color is associated with that subject" !<p>Don't know how you could do it but it can be interesting
Each of these colours should just be a single "pixel" in the wheel, so how did you decide what shape/size to make each colour? Just arbitrarily?