Show HN: A color picker for named web colors
arantius.github.io
I had this idea kicking around in my head for quite a while. Took an evening to make this, and a short morning to polish it a bit. So here it is!
arantius.github.io
Also: Finally, a tool to help me decide between greenyellow and yellowgreen.
1. CSS named colors
2. Open Props' colors[1]
3. Tailwind colors
4. XKCD's color survey results[2]
A different project sent me on a deep dive into the concept of color distances and how that can work across different spaces though so I'm afraid any other color-related projects would paralyze me with feature creep at this point though haha
---
.. [0] https://culi.page/toys/
.. [1] https://yeun.github.io/open-color/
.. [2] https://xkcd.com/color/rgb/
This makes it hard to accidentally forget about a rules that just just put in temporarily. Real colours will always match some design, which will have a carefully-chosen hexcode.
One CSS color name that always comes to mind is “rebeccapurple”. I seem to recall reading debates against introducing this at the time, but (10?) years later it’s still the first one I think about.
My second major issue is how deeply susceptible it is to cultural biases. Wikipedia handles the issue of constantly changing knowledge/culture by stating that its mission is to capture knowledge "as it currently" exists.
I'd like to see a version of the colornames scores where votes are weighed by recency. Older votes can still count, but in order to capture constantly changing/adapting culture and emerging consensuses we can maybe weigh more recent votes more heavily
Another thing I'd love to see is to just have accounts answer the question: "Which language have you spoken the most of in the past (7) years of your life?" I think this one simple data point can solve a LOOOT of the issues and captures both culture and heritage without having to differentiate between place of birth, changing life circumstances and upbringings, etc. This would also mean that people who speak Tagalog don't have to see their well-agreed-upon name for a color being overwritten by the norms of demographic majority of the userbase which skews English-speakers
---
Clearly I have a lot of thoughts haha. I still love that color-names exists. One thing I'd like to build out some day is something to aggregate all the different color naming schemes out there and have colornames.org simply be a source amongst many others. Similar projects already exist[2] but none that are explicit about being attempt to aggregate sources and not BE the ultimate word on what color is named what
.. [0] https://en.wikipedia.org/wiki/Lists_of_colors
.. [1] https://github.com/davo/Color-Standards-and-Color-Nomenclatu...
8-bit? and then which bit-8? the "2 bits for blue" 8-bit?
Or 16-bit? 24-bit? 32-bit? Using floats or not?
Now everyone in Windows world has standardized on sRGB and Mac on DCI-P3, but mobile is more important, where I believe it's still split sRGB Android, and DCI iPhone.
I don't know, but expect that HTML picked sRGB for their color space since this is the one people historically meant. I'd be surprised that it wasn't configurable and there weren't multiple versions, because why have a standard, when you can choose!
We won't even get into HDR, automatic brightness/eye-saver, or white point adjustment. You'ld be better off looking for a color perception scale rather than display scale, if you wanted to avoid that. Environmental lighting has big effects on perception though.
CSS Color Module Level 4 (draft) admits as much, and states "their use is not encouraged." https://www.w3.org/TR/css-color-4/#named-colors
I'm influenced by the having a daughter born around this time, and Rebecca's story sticks with me.
These days, we have both.
Our work is a reflection of ourselves. Some of us feel strongly about issues that affect us in a personal way. You are likely referring to social issues you do not agree with, and as a gay man I have this to say: I will not stop asserting my right to exist openly, and that includes in the work I do.
You instantly assume that I am talking about social issues that I do not agree with or that do not affect me and feel personally attacked.
It's quite the opposite, though. I most often agree with the messages people put in their documentation. Some of them even have a very deep personal meaning for me.
Yet, I stand by my point that a technical documentation or standard is no place for them. You, I or nobody has any right to force someone who is trying to build software to listen to your/my/their personal beliefs and political opinions.
I'm going to continue to build, and to make, and to live, and to thrive.
There is never "a place" for inconvenient speech. This is an extremely privileged position.
Don't like it? Don't read my docs. Go consume elsewhere. Thanks!
Additionally, even if I agree on your assertion of “your right to existing openly”, it doesn’t mean that you shouldn’t exercise that right wherever you can get away with it and fuck the haters.
I said likely, not absolute. After a certain amount of people complaining about your including social issues in your work, you begin to see a pattern :)
>it doesn’t mean that you shouldn’t exercise that right wherever you can get away with it and fuck the haters.
A brief aside of solidarity with my trans brothers and sisters is crucially important. The recent shooting in Colorado only strengthens my resolve.
You don't have to like it. You are free to complain about it. Thanks!
We should instead encourage named colors AND recognize `chucknorris` as an actual HTML color value.
My number one recommendation for people who want to get into programming. Daniel is wonderfully quirky, enthusiastic and warm.
(Mentioned here: https://youtu.be/Jbn8IRmSq8M)
It's actually very interesting to look at "constant luminance color wheels" which correct for this perceptually:
https://www.researchgate.net/profile/Ralph_Redden/publicatio...
https://i.stack.imgur.com/f4n0P.png
What we traditionally call "yellow" isn't even present, it becomes more like "khaki" or "olive".
Funny to me that how... #00FF00 is Lime... what we actually refer as Green in daily life is close to #008000
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
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
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
It has an extra comma at the end. Safari throws when passed to: c.setAttribute('points', points)
t = document.createElement("template")
t.innerHTML = `<style id="outside"></style><svg><style id="inside"></style></svg>`
t.content.querySelector("#outside").sheet // null
t.content.querySelector("#inside").sheet // undefined
https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleEle...
The fix that I suggested does seem to produce a working colour wheel, however.
Webkit implementing web standards: https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11...
I still recall a time 3 years ago when they didn't even have working webrtc support hah.
That’s a long time ago in web years. Things are different now.
For example, Safari supports the oklch and oklab color spaces starting with Safari Technology Preview 137, released December 2021.
It’s November 2022 and Chrome still doesn’t support them yet, though they are expected to be enabled by default in Chrome 110, due next month.
And of course the most anticipated selector probably ever :has() shipped in Safari 15.4 back in March [1]; Chrome didn’t ship it until August and Firefox still doesn’t have enabled by default—it’s behind a flag due to bugs.
The oklab and oklch color spaces solve a bunch of color issues with RGB and HLS [2].
This is not WebKit from 3 years ago.
[1]: https://webkit.org/blog/13096/css-has-pseudo-class/
[2]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
Turned out pretty well
I use Chrome for its developer tools exclusively.
Fine in Chrome. Thanks for this colour wheel, very handy reference.
Time to resurface the most human side to CSS. She's in this color picker, too.
Some may consider it an Easter Egg. I consider it being a human, and a throwback to when computing was more of a community, and less of a competition.
Thanks for sharing.
[] Color map with meaningful names http://www.procato.com/rgb+index/ [] The CNS Color Naming System https://www.xanthir.com/blog/b4JS1 https://en.wikipedia.org/wiki/Color_Naming_System [] Universal Color Language, Level 3 Color Names https://johndecember.com/html/spec/colorucl.html [] deriving color names from photos of rainbows: https://www.comfsm.fm/~dleeling/cis/hsl_rainbow.html [] determining color values by training on image searches: https://lear.inrialpes.fr/people/vandeweijer/color_names.htm... [] https://github.com/ayushoriginal/Optimized-RGB-To-ColorName
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)
How did you decide on the coordinates for each block of color? KNN on a traditional color wheel?
// Based on https://stackoverflow.com/a/54522007/91238 .
// I've tweaked it to spread out some of the colors (especially they greys)
// that don't fit well into a true H/S wheel.
let colorRadius = (s + v/5)*0.75 * radius;
let colorAngle = h/360 * 2 * Math.PI;It's gotten better, your run-of-the-mill low-end LCD these days isn't that bad, and better ones aren't that much more expensive anymore. But yes, there was a long time when CRTs outperformed LCDs on this one metric.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Rel...
I had to set gfx.color_management.mode to 0 for it to look correct.
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?
I love using web colors. It's basically all I use...I like that they're just there..and also you get "semantic css".
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?
* The "?" about link says a lot of this. * It was an old idea that somehow solidified recently, after spending enough time with color wheels and other things, to assemble this. * This is initially based on an HSL (hue/saturation/lightness) color wheel arrangement. But several web colors have identical H/S, so I tweaked it to spread those (especially, as you noticed, the greys) out artificially. * One of the things I wanted was to use a "real" (HSL) arrangement, to leave the values arranged visually. Close colors are close on purpose, so e.g. you can see that e.g. "tan" is a little silly, by how small its area is (there's a lot of colors very close to it, crowding it out) as compared to e.g. "crimson" which is large (not many reds, around that hue).
(Aside: the word "peru" in Portuguese means turkey, like the bird. I somehow doubt this is related.)
I mean, #D2691E is more orange than chocolate, IMO.
Black
Dimgrey (hmm)
Grey
Darkgrey (huh, darkgrey is lighter than grey)
Silver (all righty)
Gainsboro (of course)
White
Interestingly, errors in Chrome in the same function — apparently rendering continues however.
Guessing the problem is that the line: points += `${s.x} ${s.y}, `;
is adding an extra `, ` to the end of the string causing the assignment/parse that follows to fail.
[1]: https://xkcd.com/color/rgb/ ; context: https://blog.xkcd.com/2010/05/03/color-survey-results/ .
Regardless, I love this, and love using named colors when prototyping.
I read it as Chart Reuse. But it of course not that, it is a French word.
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.
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."
For functionality, they cover almost everything. For "higher purposes" they suck, but I never cared.
Thank you. An evening well spent!
team color: #005A9C
css name "dodgerblue": #1E90FF
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.
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?
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
Almost. See https://en.wikipedia.org/wiki/X11_color_names#Clashes_betwee...
I remember, way back when some of hadn't been born and the web was new and exciting, noticing the difference in greys when using the same colour names in a desktop tool's output and it's HTML documentation.
It would be interesting to make this generic for any colour pallet. For example the 12 bit palette recently submitted to HN
But awesome stuff - the color wheel looks so cool.
I often use them when I'm working on new designs and want to experiment on responsive layouts with colourful test elements.
Would be fun to add data visualisation, like "see how often those color are used" or "what color is associated with that subject" !
Don't know how you could do it but it can be interesting