17 ms·
Show HN: A color picker for named web colors
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!
- pc86 4y agoI like the way you're displaying this. How did you decide on the coordinates for each block of color? KNN on a traditional color wheel?
- rgovostes 4y agoIt is a Voronoi diagram (https://mathworld.wolfram.com/VoronoiDiagram.html https://mathworld.wolfram.com/VoronoiDiagram.html) where each point is a web color as it would be positioned on a full hue-saturation color wheel.
- CodesInChaos 4y agoIt's cheating a bit and using `saturation + brightness / 5` as radius. This separates colors with the same saturation and hue, in particular grays. // 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;
- fabstei 4y agoNice. Check out https://github.com/meodai/color-names https://github.com/meodai/color-names for a rather large (29888!) collection of hand picked colors in case you want to expand your project.
- Otek 4y agoDoesn’t work on iPad
- deleted 4y ago[deleted]
- rgovostes 4y agoSpecifically, in renderWheel() at c.setAttribute('points', points), Safari balks at the assignment and says it cannot parse the value it's been given. Perhaps the terminal comma isn't supported? (Chrome complains about it but proceeds.)
- petepete 4y agoI love this! I've had the 'Web colors' Wikipedia page in my bookmarks for years. I often use them when I'm working on new designs and want to experiment on responsive layouts with colourful test elements.
- h4l0 4y agoFunny 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.
- crazygringo 4y agoYup, it's due to the fact that we perceive green as much brighter. It's actually very interesting to look at "constant luminance color wheels" which correct for this perceptually: https://www.researchgate.net/profile/Ralph_Redden/publication/311425408/figure/fig2/AS:435956709892096@1480951587007/Constant-luminance-colour-wheel-Participants-used-a-cursor-to-indicate-the-perceived_W640.jpg https://www.researchgate.net/profile/Ralph_Redden/publicatio... https://i.stack.imgur.com/f4n0P.png https://i.stack.imgur.com/f4n0P.png What we traditionally call "yellow" isn't even present, it becomes more like "khaki" or "olive".
- PaulHoule 4y agoOn hot summer days I set my LED lights to 100% green. The idea is that I get more perceptual brightness per unit of heat released into the house. On days like that I am still getting light through the window, even if it is filtered by a space blanket, and I am mainly looking at screens, so there is still plenty of red and blue light around.
- lajosbacs 4y agoWhy do you do that, does it have a health benefit?
- nayuki 4y ago> I get more perceptual brightness per unit of heat released into the house
- kfajdsl 4y agoTo reduce the heat that the bulbs are putting out, I think? Though, LED bulbs are already very efficient, and the difference in power usage between green light and a perceptibly the same brightness normal warm or sky tone light is probably minimal.
- FamosoRandom 4y agoVery cool. 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
- phrz 4y agoBroken on iPhone
- notRobot 4y agoGitHub repo: https://github.com/arantius/web-color-wheel https://github.com/arantius/web-color-wheel
- cdiamand 4y agoI'm picturing Bob Ross standing over this palette whispering "We're going to put a happy little div here with a shade of cornflowerblue".
- hk1337 4y agocornflowerblue? That's happy little mistake in the making.
- aliqot 4y agoshould have gone with burnt umber imo, but to each their own
- jamesgreenleaf 4y agoIs there a Bob Ross for websites/apps (or general programming) somewhere out there on Youtube or Twitch?
- tabtab 4y ago"Happy little JavaScript errors"
- maxbond 4y agoLots of video game mechanics were "happy little accidents" that were then codified. For instance, in Space Invaders, the aliens speed up as there are fewer of them; this was an emergent behavior that was codified, at first it was caused by the game outputting frames as fast as possible & having less computation to perform as aliens were eliminated. (Mentioned here: https://youtu.be/Jbn8IRmSq8M https://youtu.be/Jbn8IRmSq8M)
- plgonzalezrx8 4y agoThe Coding Train. Daniel is amazing and has a Bob Ross-esque vibe to him.
- 4y ago
- drewmate 4y agoIn case the named web colors aren't enough, we're making excellent progress naming every color in the RGB space. https://colornames.org/ https://colornames.org/
- deleted 4y ago[deleted]
- cies 4y agoWhich RGB space? 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?
- incrudible 4y agoThe one that everyone and their grandmother uses to pick screen colors: 8bits per channel, integer.
- kurthr 4y agoTo be fair there's a point here, which is that color spaces from sRGB to DCI-P3 to REC2020 do have quite different color/tone/brightness ranges (gamuts). Old windows boxes (and old monitors) also displayed them very differently (especially the low brightness ones). Macs were much better, and that made picking colors on them far more repeatable. 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.
- 8n4vidtmkvmk 4y agojust fyi they're adding support for different color spaces to css
- c-fe 4y agodoes not work on Safari (MacOS)
- zaptrem 4y agoCan confirm.
- JKCalhoun 4y agoYep. Error inside: function renderWheel(). 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.
- lelandfe 4y agohttps://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ Time to resurface the most human side to CSS. She's in this color picker, too.
- reaperducer 4y agoI can't speak for anyone else, but I try to include rebeccapurple whenever I can in the web sites I build. 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.
- althaffe 4y agoI still have fond memories of the time when the Smashing Network was a thing.
- iambateman 4y agoI didn’t know about this 8 years ago. I’m glad I found out about it today - as the father of a young child - because this post was incredibly moving to me. Thanks for sharing.
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- brandonscott 4y agoVery cool and I love how clean the code is
- iib 4y agoSo simple and so elegant. 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.
- sourcecodeplz 4y agoThis is quite cool. I've always used some of these colors when doing initial mockups.
- me_bx 4y agoInteresting how some colors are so close from each other, especially "Chartreuse" and "Lawngreen" (on my middle-end monitors, at least).
- iakov 4y agoSame for me, and the "springgreen"/"mediumspringgreen" are practically the same color on my screen. I'm wondering what was the reason the original spec included those colors. Were CRT monitors of old that much better?
- moron4hire 4y agoI used to know a lot of digital photographers who clung to their CRTs for a long time after LCDs became common. You could get LCDs with better color reproduction, but they were extremely expensive, especially compared to the fact that you could barely even get rid of CRTs (and all of the photographers I knew were constantly cash-strapped from all the photography kit they compulsively purchased). 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.
- jibbit 4y agoOn my Mac, and on windows on my laptop, every colour is distinct. On Ubuntu on my laptop (with good monitor) many of the colours (the greens around the edge for example) look the same.
- oneeyedpigeon 4y agoThis is great! Would be useful if selecting a colour changed the URL so you could link directly to it.
- somid3 4y agoDoesn't work for the latest Safari browser.
- deleted 4y ago[deleted]
- evantahler 4y agoiOS and MacOS. It’s ok in chrome.
- digitalsankhara 4y agoSeconded. Safari Version 16.0 Fine in Chrome. Thanks for this colour wheel, very handy reference.
- arantius 4y agoInteresting, can you be more specific? Developed in Firefox, reports that Chrome is OK. I don't have a Mac to test with.
- lioeters 4y agoAs per another comment, this is the problematic line: points += `${s.x} ${s.y}, `; It has an extra comma at the end. Safari throws when passed to: c.setAttribute('points', points)
- JKCalhoun 4y agoYeah, Chrome don't like either, but apparently Chrome does not throw.
- r2222 4y agoShows just pretty much empty screen, with one black polygon at the top: https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg
- halostatue 4y agoI found and I think fixed the issue. https://github.com/arantius/web-color-wheel/issues/1 https://github.com/arantius/web-color-wheel/issues/1
- thih9 4y agoFeature 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. [1]: https://xkcd.com/color/rgb/ https://xkcd.com/color/rgb/ ; context: https://blog.xkcd.com/2010/05/03/color-survey-results/ https://blog.xkcd.com/2010/05/03/color-survey-results/ .
- mncharity 4y agoA derived graphic: http://www.datapointed.net/2010/06/xkcd-color-name-strata/ http://www.datapointed.net/2010/06/xkcd-color-name-strata/
- mncharity 4y agoHere's a derived word cloud.[1] Though it appears it's no longer interactive. [1] https://www.luminoso.com/post/the-color-cloud https://www.luminoso.com/post/the-color-cloud
- rickstanley 4y agoWhy are they called "web" colours? 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?
- EamonnMR 4y agoIf I had to guess, it would be because they're the names you can use in place of RGB values in style/CSS
- kevincox 4y agoThey are colours that have names in CSS. You can access 16M colours with #RRGGBB syntax but these colours are aliases to specific values and can be specified by name. https://developer.mozilla.org/en-US/docs/Web/CSS/named-color https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
- arethuza 4y agoDidn't those come from X11 - I'm sure I was using some of those for terminal settings long before the Web (let alone CSS).
- dspillett 4y ago> Didn't those come from X11 Almost. See https://en.wikipedia.org/wiki/X11_color_names#Clashes_between_web_and_X11_colors_in_the_CSS_color_scheme 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.
- arethuza 4y agoI actually think I developed a preference for some colours and combinations based on using HyperNeWS, which had a particularly tasteful set of colour combinations (at least for 1990 or so!).
- deleted 4y ago[deleted]
- ossusermivami 4y agoalways use the emacs list-color-display for that
- ikesau 4y agoThis is great. I always use the named variables in prototypes when I can (go tomato!) but have never thought about their distribution.
- amsterdorn 4y agoGreat little project! It's cool to see the skew towards red/green variants.
- cormorant 4y agoTotally irrational, of course, and now set in stone for backwards compatibility. https://arstechnica.com/information-technology/2015/10/tomato-versus-ff6347-the-tragicomic-history-of-css-color-names/ https://arstechnica.com/information-technology/2015/10/tomat... 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 https://www.w3.org/TR/css-color-4/#named-colors
- WithinReason 4y agoIn 2014, however, an unexpected event cast the color list in a more favorable light: a new shade. “Rebecca purple,” was introduced to honor the life of Rebecca Meyer, the daughter of Eric Meyer, a respected programmer and CSS writer. Rebecca died of brain cancer at the age of six; the hue (#663399) was chosen to reflect her favorite color. (A few developers opposed the addition, maintaining that a set of standards was no place for an emotional tribute. They were dismissed as curmudgeons.)
- dotancohen 4y agoThat colour is right in the top center of the tool we're discussing. I suspect that is not a coincidence.
- zestyping 4y agoI do agree that a Web standard is not the place for personal tributes. (Imagine how unusable the colour list would become if all the colours had random personal names in them!) Am I a terrible person for being aligned with the folks who opposed the addition?
- hughjd 4y agoThis is great! For those who like this, you may also like https://enes.in/sorted-colors https://enes.in/sorted-colors which also does the named web colours.
- bernardom 4y agoCool 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). (Aside: the word "peru" in Portuguese means turkey, like the bird. I somehow doubt this is related.)
- awestroke 4y agoProbably because large parts of Peru is that color - deserts, brown mountains
- Shorel 4y agoI would completely invert saddlebrown and chocolate. I mean, #D2691E is more orange than chocolate, IMO.
- Zitrax 4y agoRelated discussion with no definite answer: https://english.stackexchange.com/questions/247129/why-is-peruvian-brown-so-named https://english.stackexchange.com/questions/247129/why-is-pe...
- Waterluvian 4y agoI'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. Also: Finally, a tool to help me decide between greenyellow and yellowgreen.
- brettermeier 4y agoI never used named colors, I never knew why I should when we have color pickers. But people care about them, interesting...
- munk-a 4y agoThey're nice in prototyping styling since it's trivial to comprehend the intent of coloration while making it clear that finalized colors haven't been settled on.
- robert_tweed 4y agoI always (and only) use named colours for debugging. For example border: 1px solid red; around some element that isn't rendering as expected. 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.
- yreg 4y agoI always do border solid gold. Feels fancy.
- MaxLeiter 4y agoI use an editor plugin to autocomplete your CSS variables: https://i.imgur.com/44wogB5.png https://i.imgur.com/44wogB5.png
- deleted 4y ago[deleted]
- flawn 4y agoInteresting 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
- dheera 4y agoWould be interesting to see one for this https://nipponcolors.com/ https://nipponcolors.com/
- Exuma 4y ago
- edw519 4y agoCool! I love it! 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!
- deleted 4y ago[deleted]
- mk4p 4y agoLove 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. But awesome stuff - the color wheel looks so cool.
- auxermen 4y agoWhy is lightpink darker than pink?
- katsura 4y agoAnd why is gray darker than darkgray?
- distantsounds 4y agoThe colors look entirely muted on Firefox compared to Chrome (Windows 10). https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox 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.
- cpeterso 4y agoAre you on Mac or Linux? The colors look the same in Firefox and Chrome on Windows 11.
- samhickmann 4y ago
- ge96 4y agofirebrick is my go to red
- dotancohen 4y agoI hope you like green.
- IvanK_net 4y agoToday I learned that #00ff00 is not green, but lime! :)
- awinter-py 4y agoI am a very bad designer but good verbally, and when I design, color names are how I remember differences 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
- webstrand 4y agoThat's a nice tool. Can you actually pick colors by name, with that tool? I wanted to see what color someone would call "gecko's dream".
- awinter-py 4y agoI don't think it has a reverse lookup, but if you've ever owned a gecko you've probably seen this color IRL
- stuxnet 4y agoLooks to be #669900. I was curious as well.
- webstrand 4y agoLooks like they get their color names from <https://www.npmjs.com/package/color-name-list https://www.npmjs.com/package/color-name-list>, they're partially crowd-sourced.
- awinter-py 4y agothank you! also wow the source list on there + the color space viz are great. this is a top 10 readme
- cpeterso 4y agoI miss the vibrant!!! designs using only the 216 "web-safe" colors, like HotWired in the 1990s. :) https://en.wikipedia.org/wiki/Web_colors#Color_table https://en.wikipedia.org/wiki/Web_colors#Color_table https://en.wikipedia.org/wiki/HotWired https://en.wikipedia.org/wiki/HotWired
- moffkalast 4y agoLime is the greenest green, I knew it!
- mixmastamyk 4y agoDodger blue has always bugged me... since the turn of the century. The css color it is not even particularly close. Too bright and unsaturated: team color: #005A9C css name "dodgerblue": #1E90FF https://teamcolorcodes.com/los-angeles-dodgers-color-codes/ https://teamcolorcodes.com/los-angeles-dodgers-color-codes/
- frivoal 4y agoAll the history of the css colors, and lots of humor: https://www.youtube.com/watch?v=HmStJQzclHc https://www.youtube.com/watch?v=HmStJQzclHc
- basic612 4y agoDoes not work safari mobile
- mNovak 4y agoVery cool. Also this reveals the secret, that brown is dark orange!
- punyearthling 4y agoI love this. Good job!
- joshwcomeau 4y agoThis is amazing . 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)
- deleted 4y ago[deleted]
- FernandoMax 4y agoWhich tool is used to create the circle distribution? I was trying to find a tool to create something like this one https://cdn.howmuch.net/content/images/1600/world-gdp-updated-f4f4.png https://cdn.howmuch.net/content/images/1600/world-gdp-update... which is similar in the sense of distributing the shapes inside the circle. Could anyone help me?
- thomas88 4y agoSource code says it uses https://github.com/gorhill/Javascript-Voronoi https://github.com/gorhill/Javascript-Voronoi
- FernandoMax 4y agoThanks Thomas!
- Thorentis 4y agoWhy on earth do both lawngreen and chartreuse exist? I can barely if at all tell the difference on my phone screen. Regardless, I love this, and love using named colors when prototyping.
- quickthrower2 4y agoYeah they look the same to me on PC. I can make out the difference between the off-whites though. I read it as Chart Reuse. But it of course not that, it is a French word.
- issung 4y agoEach 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?
- ducttapecrown 4y agoIt looks like a Voronoi decomposition. That is, each region is the set of points that are closest to the pixel with the given named color.
- PartiallyTyped 4y agoI found the limitations of my monitor, the two greens at the bottom look identical.
- hoherd 4y agoPSA: 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. https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart https://en.wikipedia.org/wiki/X11_color_names#Color_name_cha...
- mncharity 4y agoA discussion of related color dictionaries.[1] [1] https://people.csail.mit.edu/jaffer/Color/Dictionaries https://people.csail.mit.edu/jaffer/Color/Dictionaries
- mncharity 4y agoApropos color names, some related work: [] Color map with meaningful names http://www.procato.com/rgb+index/ http://www.procato.com/rgb+index/ [] The CNS Color Naming System https://www.xanthir.com/blog/b4JS1 https://www.xanthir.com/blog/b4JS1 https://en.wikipedia.org/wiki/Color_Naming_System https://en.wikipedia.org/wiki/Color_Naming_System [] Universal Color Language, Level 3 Color Names https://johndecember.com/html/spec/colorucl.html https://johndecember.com/html/spec/colorucl.html [] deriving color names from photos of rainbows: https://www.comfsm.fm/~dleeling/cis/hsl_rainbow.html 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.html https://lear.inrialpes.fr/people/vandeweijer/color_names.htm... [] https://github.com/ayushoriginal/Optimized-RGB-To-ColorName https://github.com/ayushoriginal/Optimized-RGB-To-ColorName
- indyfob2008 4y agohow did you make this? is the repo public on Github?
- quickthrower2 4y agoThis seems such an obvious thing to do when you see it, but it is the first time I have seen it done. It would be interesting to make this generic for any colour pallet. For example the 12 bit palette recently submitted to HN
- TheDesolate0 4y ago
- graderjs 4y agoThis is great! 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?
- arantius 4y agoMissed this good series of questions for a while but: * 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).
- joshe 4y agoThe progression of greys is fun. In order: Black Dimgrey (hmm) Grey Darkgrey (huh, darkgrey is lighter than grey) Silver (all righty) Gainsboro (of course) White That's 3 out of 7 making sense.
- tonic4402 4y agoYandex have this https://yandex.ru/search/?text=%D0%BB%D0%B0%D0%B2%D0%B0%D0%BD%D0%B4%D0%BE%D0%B2%D1%8B%D0%B9+%D1%86%D0%B2%D0%B5%D1%82&lr=63 https://yandex.ru/search/?text=%D0%BB%D0%B0%D0%B2%D0%B0%D0%B... Article https://yandex.ru/blog/company/94762 https://yandex.ru/blog/company/94762 Also find this https://maximal.github.io/colour/ https://maximal.github.io/colour/ https://colorscheme.ru/color-names.html?ysclid=lascsvqk3j262126919 https://colorscheme.ru/color-names.html?ysclid=lascsvqk3j262...
- dugmartin 4y agoAnyone know of a set of color palettes that only use named colors?