14 ms·
Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
- knuptfad 6y agoThe idea was to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decide between a few CSS colors, I can just check them here side by side. I've created this tool last summer, but I hadn't shared it here back then. It's a PWA that I made with pure JS.
- muli_d 6y agoThis is very cool, I love it. Thanks for sharing.
- achairapart 6y agoVery cool. Please add permalinks/history state, so we can share specific hue or colors. Thanks!
- uhtred 6y agoLooks like it's on Github, you could submit a pull request to add those things :)
- regularjack 6y agoI think giving feedback is a valid way to contribute, I certainly would welcome feedback if it were my project. Not all contributions must be code.
- hunter2_ 6y agoNormally I'd say "the feature request should still be made on GitHub even if it's not code" except for the fact that this is a Show HN which seems just as valid of a receiving area.
- preommr 6y agoIt's always the smiley face that takes a comment from idiosyncratic but potentially earnest to condescending and passive-aggressive.
- bostonvaulter2 6y agoIs that really how people are perceiving smiley faces nowadays? I make rather extensive use of smiley faces and smiling emoji and I would hate for them to be received in that manner, rather than what I intend, which is an authentic smile.
- Craighead 6y agoSee? :)
- chronogram 6y ago> Is that really how people are perceiving smiley faces nowadays? No. In this case there’s nothing earnest about the smiley face, which is why it makes the comment seem rude. Just like a genuine smile is different to Dolores Umbridge’s smile.
- wccrawford 6y agoSome people will find malice whenever possible, even in smiling. I read the comment as an attempt to redirect the person from begging to helping, in as nice a way as possible. But if someone has a bone to pick with people who are rude about suggestions, they're going to read ill intent into the whole message, smiley or otherwise.
- deleted 6y ago[deleted]
- flanbiscuit 6y agoI've needed this in my life so many times, thank you for creating this!
- sam1r 6y agoAwesome! Could you possibly implement a double-click to clipboard copy option?
- sam1r 6y agoHappy to make a PR or just do it quickly! Edit: here you go https://pastebin.com/5Kypr4kh https://pastebin.com/5Kypr4kh Edit 2: I would, but I'm at work so personal GH is a no-go atm. I'll cycle back here EOD & make the PR if OP agrees w/ proposal
- knuptfad 6y agoThanks for the suggestion. Could be nice to have, but then there must be a visual feedback for the user. Issues/PRs are welcomed in the GH repo.
- forgotmypw17 6y agoThank you for creating and sharing. Very nice app.
- owly 6y agoThis is really well done. Congratulations on making such a useful tool. Thanks for sharing!
- anarcat 6y agois there a way to change the "hue tolerance" without hacking the source? or is that part of the design? :) in other words: how can i just bunch more colors together?
- arkitaip 6y agoOoh I really enjoyed this, it's a nice way to expand on your color name vocab. I wonder if there is an equivalent for Pantone?
- knuptfad 6y agoThanks, I'm happy to hear you enjoyed it. I'm not aware of an equivalent tool for Pantone colors. But it can be created using this very tool with a table of pantone colors instead of a table of named css colors that it uses now.
- reaperducer 6y agoI'm not aware of an equivalent tool for Pantone colors There is a tool, but I've only seen it in a dead tree edition.
- Minor49er 6y agoThis is really cool. The whole experience is slick! One thing I noticed is that some colors appear brighter, but are further down on the Saturation scale. For example, mediumturquoise and turquoise are shown as being less saturated than cyan, though cyan doesn't mix in any gray. Are these sorted by the sums of their RGB values? I'm also not too well versed in color theory, so I could be missing or misunderstanding something too.
- knuptfad 6y agoThanks, I'm glad! :) I think there's a misunderstanding there. Mediumturquoise and turquoise are both located above cyan, which means they are brighter as the vertical axis is the lightness. Also, to answer your question, colors are sorted by their hue, saturation and lightness values. So, it's actually a 3D color visualizer, where one dimension (hue) is reduced into just a slider at the top, and the other two dimensions are represented in a 2D grid. Thanks for your comment!
- deleted 6y ago[deleted]
- Minor49er 6y agoThat makes sense. Thank you!
- johnsonap 6y agoSome of these seem a little off, for example CADETBLUE and CYAN being next to each other. could just be my eyes or my monitor though
- knuptfad 6y agoNote that their hue and lightness values are almost same. The only difference is saturation and that seems to be why they are on the same row, differentiated only by the saturation axis.
- n3k5 6y ago> their hue and lightness values are almost same Yeah? Well … you know, that's just, like, your opinion, man. More specifically, HSL's opinion. HSL is a fine colour space for specifying CSS colours, but not so good for evaluating lightness. If I use HSLuv instead, which is supposed to be like HSL, but more human-perceptually uniform and sane (basically a neat compromise between CIE Luv/Lab and standard HSL), I get a lightness of 61.2 for cadetblue and 91.1 for cyan. My bog-standard image editor uses HSB (a.k.a. HSV) in the HSL-style mode of its colour picker (HSL isn't even an option); and if I measure cadetblue with that via the ‘eyedropper’ tool, I get a brightness of 63%, whereas cyan has 100%. Those are obviously way closer to the truth when you just, like, look at the colours — it's totally plausible that cyan is about 50% brighter; “lightness values are almost same” is not plausible. This discrepancy isn't a huge problem, because the main dimension by which this tool organises colours is hue, which HSL is OK at. Only the way in which colours with similar hue are laid out on the page is off. It would be nice to see a more appropriate colour space used for this purpose.
- knuptfad 6y agoI was commenting based on the HSL values of the mentioned colors. At the time of creating this tool I really didn't care too much about using a more perception-aware color space. Doing it just based on HSL already seemed like a huge win. But I received similar feedback in the past, too. So thanks for pointing out. I'll maybe think about making it even better in this sense.
- edwinyzh 6y agoIt's neat! Slightly offtopic - I saw one of the colors named "peru", does the name has any connection with Peru the country?
- uxamanda 6y agoNot sure about that one, but dodgerblue is named after the LA Dodgers, so seems possible :-) https://en.wikipedia.org/wiki/Dodger_blue https://en.wikipedia.org/wiki/Dodger_blue
- runarberg 6y agoInteresting. Here is Peru on the CSSWG draft document[1]. Other then rebeccapurple[2][3] is there any rationale given for the names of the CSS colors? 1: https://drafts.csswg.org/css-color-3/#peru https://drafts.csswg.org/css-color-3/#peru 2: https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life 3: https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html https://lists.w3.org/Archives/Public/www-style/2014Jun/0312....
- knuptfad 6y ago"chartreuse" name is coming from the chartreuse drink, which is a highly alcoholic and green colored booze :)
- reaperducer 6y ago"Goldenrod" looks like a field of goldenrods.
- runarberg 6y agoAfter doing some digging, I found out that Peru is also a named color in the X11 color system[1]. Peru in particular seems to come from Peruvian Brown[2]. I don’t know what is peruvian about this shade of brown. But hopefully this is enough to get you started. 1: https://en.wikipedia.org/wiki/X11_color_names https://en.wikipedia.org/wiki/X11_color_names 2: https://en.wikipedia.org/wiki/Shades_of_brown#Peru https://en.wikipedia.org/wiki/Shades_of_brown#Peru
- 6y ago
- parekhnish 6y agoThis is fun! The only "bug" I see, if at all, is that the hue value does not wrap around, i.e. the colors shown at 360 are not the same colors shown at 0.
- knuptfad 6y agoGood point, thanks for pointing it out. I think I was trying to deal with it, but for some reason I just let it be this way. Also contributions are welcome! :)
- tobr 6y agoGood reminder that in CSS, darkgray is a light gray and gray is a dark gray. Also presumably up is down and wet is dry.
- knuptfad 6y ago¯\_(ツ)_/¯
- cialowicz 6y ago'Brown' is dark red, and to my eye 'sienna' has very little red in it. To get actual brown, you need 'saddlebrown'. CSS is super weird.
- SamBam 6y ago"Sienna" is an extremely ambiguous color already. Image search for "sienna color" and you'll get a huge range of browns, reds and oranges. "Burn sienna" seems even more varied. Here's are four different color-oriented websites, with a dark earthy orange from Colorlex [1], a light salmon from Canva [2], a light brown from Benjamin Moore [3] and a dark brown from Atelieracrylic [4]. 1. https://colourlex.com/project/burnt-sienna/ https://colourlex.com/project/burnt-sienna/ 2. https://www.canva.com/colors/color-meanings/burnt-sienna/ https://www.canva.com/colors/color-meanings/burnt-sienna/ 3. https://www.benjaminmoore.com/en-us/color-overview/find-your-color/color/1196/burnt-sienna?color=1196 https://www.benjaminmoore.com/en-us/color-overview/find-your... 4. http://atelieracrylic.com/atelier-interactive/burnt-sienna/ http://atelieracrylic.com/atelier-interactive/burnt-sienna/
- formerly_proven 6y agoI had no idea there were this many named colors in CSS. Turns out there are 16 HTML colors (upped to a whoppin' 17 colors in HTML4/CSS2.1) and around 124 named colors which originally came in due to X11. Since then, several colors have been added through various standards updates for a total of around 147 colors.
- mcv 6y agoSome of these colour names make little sense. For example, 'chocolate' is surprisingly light. 'brown' is red.
- dfox 6y agoMost of the color names come from X11 rgb.txt which was not exactly "designed" to be anything and also many entries assume RGB color space of some particular Unix workstation which was decidedly non-sRGB (eg. using significantly different gamma curve).
- avianlyric 6y agoWorth watching the Technology Connection video on the colour Brown [1]. It's a strange colour that only really exists when placed in the context of other colours, not something that can really be produced by a pure RGB light source, which explains why the CSS Brown colour looks red. [1]: https://www.youtube.com/watch?v=wh4aWZRtTwU https://www.youtube.com/watch?v=wh4aWZRtTwU
- meristem 6y agoFor speed's sake could a hover or tap bring out the hex code? I understand that was not the function of your site. It would be cool to just be able to quickly see/use the hex if one is searching for color combos.
- meristem 6y agoYou may be familiar with this type of request: file it under "SCOPE CREEP"
- knuptfad 6y agoInteresting point. Maybe the user could toggle the animations on and off. But back then, I hadn't designed this tool with the idea of creating a standard-ish colorpicker in mind.
- thitcanh 6y agoThe site is literally about CSS color names for 256-bit colors, it’s not a palette site with beautiful colors. This is a ridiculous feature request, but I can’t say I’m not used to this.
- meristem 6y agoThis may be a use case perspective. For your use case, knowing hex code is superfluous, and that is your mental model. I interface between researchers, designers and developers. If someone in my environment says "I want this cadet blue', the first thing others ask is "what is the hex code".
- 0xADADA 6y agoi love this. you now have the honor of making it into my "Tools" bookmarks folder.
- crazygringo 6y agoThis is definitely a cool way of exploring CSS colors. But, serious question: does anyone actually use CSS colors except for a handful of the basics ("red", "blue") for prototyping/debugging? I mean, the idea of typing "background-color: lightsalmon;" just feels so bizarre to me. Whenever I've needed to come up with colors from scratch, I'll just start with an intuitive best guess -- e.g. "hsl(30, 80%, 50%)" -- and then iterate a couple times till I get what I'm looking for. It seems like even more effort to try to select colors from the CSS palette when it might turn out that there isn't even a satisfactory one. The CSS colors are still extremely limited. E.g. the distance between neighbors like "dark cyan" and "darkslategray" is huge.
- codazoda 6y agoI prefer to use named colors in my own CSS layouts. "lightsalmon" is more descriptive to me than "#FFA07A" or "rgb(255, 160, 122)" or "hsl(17, 100%, 73.9%)" at a glance.
- yyx 6y agoA good IDE will show a color preview https://code.visualstudio.com/assets/docs/languages/css/color.png https://code.visualstudio.com/assets/docs/languages/css/colo...
- reaperducer 6y agoAwesome if you're in your office on your usual work computer. Not great if you're in the field trying to make quick fixes on whatever terminal a client provides.
- endless1234 6y agoIn which reality do you need to monkey patch CSS color values on a terminal directly to production? With no possibility of running a IDE?
- SilverRed 6y ago
- mutatio 6y agoNice, similar to: https://encycolorpedia.com/html https://encycolorpedia.com/html but probably more intuitive. Are you using CIE* colorspace to match?
- knuptfad 6y agoThanks. Colors are sorted just based on their hue, saturation and lightness.
- signal11 6y agoThis is very cool, thank you! Interestingly the difference between some of these colours is (to my eyes / monitor) ... very little? E.g. chartreuse and lawngreen, palegreen and lightgreen, mediumturquoise and darkturquoise, etc.
- jedberg 6y agoOut of curiosity are you male? There are physical differences between men's and women's eyes where men's eyes are better at edge and motion detection and women's eyes are better at detecting the difference between blue and green. Or at least adults are, possibly because of the environment they grew up in (the science is still murky on that one).
- leephillips 6y agoSome women are even tetrachromats, with four different color receptors (it’s pretty rare).
- jedberg 6y agoThat's orthogonal though. Both men and women can be tetrachromats, it's just more common in women (but exceedingly rare in both populations).
- signal11 6y agoYes; thanks for pointing that out, that's an important factor too, I guess.
- munificent 6y agoColor perceptiveness varies surprising widely across people. I took a test a while back and discovered that I'm apparently the color equivalent of a super-taster. I have extremely fine color perception. In the examples you list, lawngreen looks darker, bluer and a little more saturated than chartreuse. Palegreen is much lighter than lightgreen and somewhat more saturated. Mediumturquoise is bluer, darker, and duller than darkturquoise's greenish tint. Note, of course, that your monitor and viewing environment will affect your perception too.
- samstave 6y agoThats pretty darn dope.
- knoebber 6y agoI love the simplicity of UI and the design! It would be fun to use this to replace some hex codes in my code with color names. Some thoughts: 1. In grayscale mode the slider doesn't appear to do anything 2. Have you considered adding a way to compare colors or find complimentary? 3. A simple search box that accepted any css color format would be useful
- knuptfad 6y agoThanks! My answers to your points: 1. True. Maybe I could make it also disabled to restrict interacting with it altogether. 2. I didn't design the tool as a more serious colorpicker or color scheme generator, so I wasn't thinking about adding more advanced features. 3. I thought about adding a search box that would accept many possible color values as input, but I feel like, adding anything will make the design more cluttered at this point. So, for me, adding stuff is more of a design challenge than a technical one.
- nc 6y agoLovely - you should make url reflect the slider state for easy sharing.
- Etheryte 6y agoInteresting display how certain parts of the color space used for the web are clearly held in higher regard than others. Hue 135 has only one color, while hue 36 has whopping thirteen.
- netmare 6y agoThis is very nicely done, but I still prefer the simplicity of <http://davidbau.com/colors/ http://davidbau.com/colors/>. Despite being only 2-dimentional, I find that layout strangely more intuitive. I think the author manually tweaked the color positions, so that may be the reason.
- reaperducer 6y agoThis one works on mobile. The one you linked to does not.
- netmare 6y agoWhat do you mean? It's just a static HTML table and it looks fine on both my Android 11 phone with Opera and in Firefox's Responsive mode on the desktop. It may not be mobile-friendly, but that's not inherently bad, especially for something that's not meant to be used on a phone.
- thih9 6y agoSlightly off topic, I always thought named CSS colors are generally ignored (in favour of 'rgba' / '#hex'). Are named CSS colors seeing any practical use?
- reaperducer 6y agoI see them used a lot in SVGs. But I don't know if that's a technical issue, or programmer preference.
- flixic 6y agoFor some reason, #000 or #000000 doesn't always work, but 'black' does. Never spent much time figuring out why.
- frosted-flakes 6y agoBlack and white are probably used quite a lot, for obvious reasons. I use the other colours a lot for quick prototyping or debugging (particularly red), but I generally fine-tune the colours to something else later.
- liminal 6y agoWho decided that 'lightpink' should be darker than 'pink'? Also, nice project :)
- jedimastert 6y agoI didn't realize there are a WACKTON of named CSS colors. Weird
- GrazeMor 6y agoColors appear different depending on what color they are next to so its not a great way to pick colors.
- legitster 6y agoI love this! I am one of the rare people who use named colors all of the time, and this will definitely get a bookmark from me! Especially during prototyping/design, it's soooo much easier to keep your designs consistent with a named look-alike color, then switch over to brand colors with a find/replace. For personal projects, I almost exclusively use named colors.
- saalweachter 6y agoHuh, I always thought chartreuse was a red-ish color.
- Antipode 6y agoThat's a fairly common misconception for some reason.
- saalweachter 6y agoThe Mandela effect strikes again.
- throwaway888abc 6y agoSuper helpful, bookmarked, Thank You
- cjboco 6y agoThere’s an attempt to name ALL the rgb web space colors... https://colornames.org/ https://colornames.org/
- b0afc375b5 6y agoI wanted to add Violet Evergarden to one of the colors, but there are already 22 Violet Evergardens. Lol.
- sam1r 6y agoAwesome! Could you possibly implement a double-click to clipboard copy option?
- IncRnd 6y agoIt's kind of a shame that JS needs to be enabled for a CSS page to render. :( Usefull, though. Thank you for posting this.
- devtul 6y agoIs there any website that generates a color pallet along an example like X color for bg and Y for font and so on? It is cool to get 5 matching colors but I'm a dope for design, so I have no idea how to work with that.
- Waterluvian 6y agoIs there any value to named css colours beyond convenience for development? I find that I use hex for properly designed colours and otherwise use like one of 15 named colours for devel placeholders. Turns out there's like... 100. Are they special? Or did someone just pick and give them names?
- sellyme 6y agoSome of them are special (they can be displayed on devices with very low colour depth), some of them are just there for sentimental value (e.g., rebeccapurple), but most of them descend from X11's colour list - which itself descends from a mishmash of Crayola colours, Sinclair Paints samples, and whatever Jim Gettys thought was important in this 1985 commit: https://cgit.freedesktop.org/~alanc/xc-historical/commit/xc/programs/rgb/rgb.txt?id=0d0ad63237618270e48503a37ce542139d7abab5 https://cgit.freedesktop.org/~alanc/xc-historical/commit/xc/...
- Waterluvian 6y agoThank you so much. Your response nails exactly what I was curious about.
- deleted 6y ago[deleted]
- frivoal 6y agoHere's a greatly entertaining talk about the whacky history of the bizarre naming of colors in CSS: https://www.youtube.com/watch?v=HmStJQzclHc https://www.youtube.com/watch?v=HmStJQzclHc
- bengtan 6y agoMy version: https://bengtan.com/css-named-colours-picker/ https://bengtan.com/css-named-colours-picker/
- danicrack 6y agovery beautiful
- breck 6y agoThis was really fun to play with. Interesting patterns going on there. I think /r/InternetIsBeautiful/ may like this.