Good reminder that in CSS, darkgray is a light gray and gray is a dark gray. Also presumably up is down and wet is dry.
But 'chucknorris'[0] is still my favorite red.
[0]: https://stackoverflow.com/questions/8318911/why-does-html-th...
Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
51–60 of 167 posts
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#52Earlier quoted context omitted.
'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.
"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/bur…
Fair enough, but the 'brown' issue is similarly confusing to the lightness reversal between 'gray' and 'darkgray'.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#53Earlier quoted context omitted.
"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/bur…
Fair enough, but the 'brown' issue is similarly confusing to the lightness reversal between 'gray' and 'darkgray'.
Agree on the brown front, it's a very odd color choice.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#54This 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 t…
Using the color names is more accessible. People with vision disabilities can have a custom plugin that changes the colors based on their name, instead of trying to convert all the hex codes.
Are you saying such a plugin exists that only works with named colors?
That would seem like a... usability disaster.
Any accessibility tool for vision should operate at an OS level to map colors across everything. And even if you wanted a web-only tool, it would need to similarly operate across all colors -- whether hex codes or in images or SVG's. Very few sites use any named CSS colors at all except for "white" or "black".
There are lots of areas where it's important to keep accessibility in mind... but named CSS colors would not seem to be one of them.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#55Earlier quoted context omitted.
Note 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.
> 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…
I 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.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#56I 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.
Some of these colour names make little sense. For example, 'chocolate' is surprisingly light. 'brown' is red.
Most 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).
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#57Lovely - you should make url reflect the slider state for easy sharing.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#58The 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.
Very cool. Please add permalinks/history state, so we can share specific hue or colors. Thanks!
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#59Interesting 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.
Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
#60I 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
Thanks!
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.