[HN Gopher] Show HN: A color picker for named web colors
___________________________________________________________________
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!
Author : arantius
Score : 544 points
Date : 2022-11-21 15:12 UTC (7 hours ago)
(HTM) web link (arantius.github.io)
(TXT) w3m dump (arantius.github.io)
| mk4p wrote:
| 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.
|
| But awesome stuff - the color wheel looks so cool.
| somid3 wrote:
| Doesn't work for the latest Safari browser.
| tambourine_man wrote:
| Yep, Safari latest
|
| https://imgur.com/a/Tsx9pEZ
| moffkalast wrote:
| To the surprise of absolutely nobody.
|
| Webkit implementing web standards: https://media.tenor.com/im
| ages/7d9d11dacf3d5c4043c1da7cf5f11...
| alwillis wrote:
| WebKit is doing quite well these days:
| https://wpt.fyi/interop-2022
| tambourine_man wrote:
| I've been developing for the web for 25 years and Safari is
| my browser of choice.
|
| I use Chrome for its developer tools exclusively.
| moffkalast wrote:
| Well it's not like you get a choice on iOS anyway
| alwillis wrote:
| Same... and I'm running Safari 16.2 on the latest public beta
| of macOS Ventura.
| [deleted]
| evantahler wrote:
| iOS and MacOS. It's ok in chrome.
| digitalsankhara wrote:
| Seconded. Safari Version 16.0
|
| Fine in Chrome. Thanks for this colour wheel, very handy
| reference.
| arantius wrote:
| Interesting, can you be more specific? Developed in Firefox,
| reports that Chrome is OK. I don't have a Mac to test with.
| halostatue wrote:
| I found and I think fixed the issue.
|
| https://github.com/arantius/web-color-wheel/issues/1
| panzerboiler wrote:
| I don't think the real issue is that one. At least in
| Safari I get this: 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
|
| That means that the .sheet property is present on the style
| element, but not if it is inside an svg element.
| divbzero wrote:
| This is what I saw too. Safari apparently does not
| support _SVGStyleElement.sheet_ :
|
| https://developer.mozilla.org/en-
| US/docs/Web/API/SVGStyleEle...
| halostatue wrote:
| The compatibility chart shows Safari supporting
| _SVGStyleElement.sheet_ since v 3 (v1 iOS).
|
| The fix that I suggested does seem to produce a working
| colour wheel, however.
| divbzero wrote:
| Which version of Safari is producing the working color
| picker? The fix does not work for me with Safari 16.1 and
| another user described the same in the GitHub issue you
| filed.
| panzerboiler wrote:
| For some reason, the style element inside the svg does not
| have a .sheet property. A workaround is to create the style
| element in js and append it to the svg, or move it outside
| the svg and let the styles cascade. A strange bug...
| lioeters wrote:
| As 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 wrote:
| Yeah, Chrome don't like either, but apparently Chrome does
| not throw.
| r2222 wrote:
| Shows just pretty much empty screen, with one black polygon
| at the top: https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg
| cpeterso wrote:
| I 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/HotWired
| moffkalast wrote:
| Lime is the greenest green, I knew it!
| flawn wrote:
| 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
| cormorant wrote:
| Totally irrational, of course, and now set in stone for backwards
| compatibility. 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
| WithinReason wrote:
| _In 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 wrote:
| That colour is right in the top center of the tool we're
| discussing. I suspect that is not a coincidence.
| zestyping wrote:
| I 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?
| cybrox wrote:
| No, I agree. Web standards are not a place for personal
| tributes and documentations are not a place for political
| statements.
|
| These days, we have both.
| DangitBobby wrote:
| Is rebeccapurple really any worse than dodgerblue,
| cornflowerblue, greenyellow, or yellowgreen? At least it
| has "purple" in the name.
| coldpie wrote:
| No. But if you go on and on that you didn't get your way,
| you might be.
| tyleregeto wrote:
| When I loaded up the link, before viewing the comments in
| here, the very first thing I did was look for "Rebecca
| purple", and I was happy to find it. Not really a comment
| on your remarks, but thought I would share it.
|
| I'm influenced by the having a daughter born around this
| time, and Rebecca's story sticks with me.
| ravenstine wrote:
| I take that to mean they're not discouraged. After all, the
| <marquee> element still appears to work in 2022. I imagine if
| named colors are ever removed as a feature from browsers, it
| won't be until a year like 2057.
|
| We should instead encourage named colors AND recognize
| `chucknorris` as an actual HTML color value.
| auxermen wrote:
| Why is lightpink darker than pink?
| katsura wrote:
| And why is gray darker than darkgray?
| lelandfe wrote:
| 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.
| [deleted]
| [deleted]
| iambateman wrote:
| I 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.
| reaperducer wrote:
| I 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 wrote:
| I still have fond memories of the time when the Smashing
| Network was a thing.
| thih9 wrote:
| 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.
|
| [1]: https://xkcd.com/color/rgb/ ; context:
| https://blog.xkcd.com/2010/05/03/color-survey-results/ .
| rickstanley wrote:
| Why 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 wrote:
| If I had to guess, it would be because they're the names you
| can use in place of RGB values in style/CSS
| kevincox wrote:
| They 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
| arethuza wrote:
| Didn'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 wrote:
| _> Didn 't those come from X11_
|
| Almost. See https://en.wikipedia.org/wiki/X11_color_names#C
| lashes_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 wrote:
| I 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!).
| ge96 wrote:
| firebrick is my go to red
| brandonscott wrote:
| Very cool and I love how clean the code is
| phrz wrote:
| Broken on iPhone
| iib wrote:
| So 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.
| [deleted]
| notRobot wrote:
| GitHub repo: https://github.com/arantius/web-color-wheel
| sourcecodeplz wrote:
| This is quite cool. I've always used some of these colors when
| doing initial mockups.
| Thorentis wrote:
| Why 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.
| PartiallyTyped wrote:
| I found the limitations of my monitor, the two greens at the
| bottom look identical.
| Exuma wrote:
| punyearthling wrote:
| I love this. Good job!
| hughjd wrote:
| This is great! For those who like this, you may also like
| https://enes.in/sorted-colors which also does the named web
| colours.
| distantsounds wrote:
| The colors look entirely muted on Firefox compared to Chrome
| (Windows 10).
|
| 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 wrote:
| Are you on Mac or Linux? The colors look the same in Firefox
| and Chrome on Windows 11.
| ossusermivami wrote:
| always use the emacs list-color-display for that
| cdiamand wrote:
| 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".
| jamesgreenleaf wrote:
| Is there a Bob Ross for websites/apps (or general programming)
| somewhere out there on Youtube or Twitch?
| tabtab wrote:
| "Happy little JavaScript errors"
| plgonzalezrx8 wrote:
| The Coding Train. Daniel is amazing and has a Bob Ross-esque
| vibe to him.
| fredrikholm wrote:
| +1
|
| My number one recommendation for people who want to get
| into programming. Daniel is wonderfully quirky,
| enthusiastic and warm.
| hk1337 wrote:
| cornflowerblue? That's happy little mistake in the making.
| aliqot wrote:
| should have gone with burnt umber imo, but to each their own
| dotancohen wrote:
| I hope you like green.
| pc86 wrote:
| I 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 wrote:
| It is a Voronoi diagram
| (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 wrote:
| It'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;
| edw519 wrote:
| Cool! 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!
| hoherd wrote:
| 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.
| https://en.wikipedia.org/wiki/X11_color_names#Color_name_cha...
| Otek wrote:
| Doesn't work on iPad
| [deleted]
| rgovostes wrote:
| Specifically, 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.)
| bernardom wrote:
| 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).
|
| (Aside: the word "peru" in Portuguese means turkey, like the
| bird. I somehow doubt this is related.)
| Zitrax wrote:
| Related discussion with no definite answer:
| https://english.stackexchange.com/questions/247129/why-is-pe...
| awestroke wrote:
| Probably because large parts of Peru is that color - deserts,
| brown mountains
| Shorel wrote:
| I would completely invert saddlebrown and chocolate.
|
| I mean, #D2691E is more orange than chocolate, IMO.
| mixmastamyk wrote:
| 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: team color:
| #005A9C css name "dodgerblue": #1E90FF
|
| https://teamcolorcodes.com/los-angeles-dodgers-color-codes/
| issung wrote:
| 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?
| ducttapecrown wrote:
| It 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.
| fabstei wrote:
| Nice. Check out https://github.com/meodai/color-names for a
| rather large (29888!) collection of hand picked colors in case
| you want to expand your project.
| ikesau wrote:
| This is great. I always use the named variables in prototypes
| when I can (go tomato!) but have never thought about their
| distribution.
| me_bx wrote:
| Interesting how some colors are so close from each other,
| especially "Chartreuse" and "Lawngreen" (on my middle-end
| monitors, at least).
| iakov wrote:
| Same 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 wrote:
| I 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 wrote:
| On 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.
| dheera wrote:
| Would be interesting to see one for this
|
| https://nipponcolors.com/
| drewmate wrote:
| In case the named web colors aren't enough, we're making
| excellent progress naming every color in the RGB space.
|
| https://colornames.org/
| adzm wrote:
| It would be interesting to have goals or visualize tiers by
| number of significant bits of the individual color components.
| RheingoldRiver wrote:
| I remember that! I participated a bit, it was pretty fun
| cies wrote:
| Which 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?
| kurthr wrote:
| To 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.
| incrudible wrote:
| The one that everyone and their grandmother uses to pick
| screen colors: 8bits per channel, integer.
| [deleted]
| wpietri wrote:
| This is absolutely deranged and I love it.
| Waterluvian wrote:
| 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.
|
| Also: Finally, a tool to help me decide between greenyellow and
| yellowgreen.
| tabtab wrote:
| If you don't get it right, you'll get a paleVioletRed-slip.
| MaxLeiter wrote:
| I use an editor plugin to autocomplete your CSS variables:
|
| https://i.imgur.com/44wogB5.png
| brettermeier wrote:
| I never used named colors, I never knew why I should when we
| have color pickers. But people care about them, interesting...
| munk-a wrote:
| They'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 wrote:
| I 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.
| [deleted]
| tta wrote:
| Relatedly, Tailwind[1] has fixed my analysis paralysis with CSS
| colors for good.
|
| [1]: https://tailwindcss.com/docs/customizing-colors
| edjw wrote:
| I made this tool a few years ago to find the closest colour
| from the Tailwind colour palette from any given colour
|
| https://find-nearest-tailwind-colour.netlify.app
| jozzy-james wrote:
| tangentially related (not affiliated with the company, just
| a fan), but https://usewindy.com/ does similar stuff - and
| more.
| leeoniya wrote:
| it needs something between Yellow and Lime, like Olive. that
| one transition is not as smooth as the others.
| frivoal wrote:
| All the history of the css colors, and lots of humor:
| https://www.youtube.com/watch?v=HmStJQzclHc
| [deleted]
| basic612 wrote:
| Does not work safari mobile
| petepete wrote:
| I 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 wrote:
| 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.
| crazygringo wrote:
| Yup, 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/publicatio...
|
| https://i.stack.imgur.com/f4n0P.png
|
| What we traditionally call "yellow" isn't even present, it
| becomes more like "khaki" or "olive".
| PaulHoule wrote:
| On 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.
| meatmanek wrote:
| You may want to measure the actual power usage and light
| output of your LED lights. Typically, green LEDs are less
| efficient than blue or red, which may cancel out the
| perceptual differences.
| lajosbacs wrote:
| Why do you do that, does it have a health benefit?
| kfajdsl wrote:
| To 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.
| nayuki wrote:
| > I get more perceptual brightness per unit of heat
| released into the house
| sricks3 wrote:
| Funny to me that how... #00FF00 is Lime... what we actually
| refer as Green in daily life is close to #008000
|
| And that "limegreen" (#32CD32) is a third, distinct color name.
| oneeyedpigeon wrote:
| That doesn't sound SO absurd to me when I think about it.
| Limes do go through a fair range of colour space, after all.
| Maybe there should be a limeyellow?
| samhickmann wrote:
| [deleted]
| FamosoRandom wrote:
| Very 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
| oneeyedpigeon wrote:
| This is great! Would be useful if selecting a colour changed the
| URL so you could link directly to it.
| amsterdorn wrote:
| Great little project! It's cool to see the skew towards red/green
| variants.
| IvanK_net wrote:
| Today I learned that #00ff00 is not green, but lime! :)
| awinter-py wrote:
| I 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 wrote:
| Looks like they get their color names from
| <https://www.npmjs.com/package/color-name-list>, they're
| partially crowd-sourced.
| awinter-py wrote:
| thank you! also wow the source list on there + the color
| space viz are great. this is a top 10 readme
| webstrand wrote:
| That'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 wrote:
| I don't think it has a reverse lookup, but if you've ever
| owned a gecko you've probably seen this color IRL
| stuxnet wrote:
| Looks to be #669900. I was curious as well.
| FernandoMax wrote:
| Which 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-update...
| which is similar in the sense of distributing the shapes inside
| the circle. Could anyone help me?
| thomas88 wrote:
| Source code says it uses https://github.com/gorhill/Javascript-
| Voronoi
| FernandoMax wrote:
| Thanks Thomas!
| joshwcomeau wrote:
| This 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)
| mNovak wrote:
| Very cool. Also this reveals the secret, that brown is dark
| orange!
| c-fe wrote:
| does not work on Safari (MacOS)
| JKCalhoun wrote:
| Yep. 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.
| zaptrem wrote:
| Can confirm.
___________________________________________________________________
(page generated 2022-11-21 23:00 UTC)