Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way • Hacker News Board

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#21

Post by knuptfad » Thu, Mar 18, 2021, 4:27 PM UTC

meristem wrote: post #18

For 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.

Interesting 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#22

Post by thitcanh » Thu, Mar 18, 2021, 4:29 PM UTC

meristem wrote: post #18

For 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.

The 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#23

Post by mcv » Thu, Mar 18, 2021, 4:29 PM UTC

formerly_proven wrote: post #17

I 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#24

Post by crazygringo » Thu, Mar 18, 2021, 4:29 PM UTC

This 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#25

Post by runarberg » Thu, Mar 18, 2021, 4:29 PM UTC

edwinyzh wrote: post #11

It's neat! Slightly offtopic - I saw one of the colors named "peru", does the name has any connection with Peru the country?

Interesting. 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

2: https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life

3: https://lists.w3.org/Archives/Public/www-style/2014Jun/0312....

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#26

Post by codazoda » Thu, Mar 18, 2021, 4:34 PM UTC

crazygringo wrote: post #24

This 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…

I 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#27

Post by mutatio » Thu, Mar 18, 2021, 4:36 PM UTC

Nice, similar to: https://encycolorpedia.com/html but probably more intuitive.

Are you using CIE* colorspace to match?

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#28

Post by signal11 » Thu, Mar 18, 2021, 4:37 PM UTC

This 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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#29

Post by cialowicz » Thu, Mar 18, 2021, 4:37 PM UTC

tobr wrote: post #9

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.

'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.

Re: Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way

#30

Post by yreg » Thu, Mar 18, 2021, 4:38 PM UTC

tobr wrote: post #9

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.

Fiddle if anyone wants to see them: https://jsfiddle.net/yucsj7a2/1/