Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

enes.in

Post reply on HN
Print view View original

41–50 of 167 posts

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

#41

Post by munificent »

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…

> 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%)"

That's what I do too, but I find it leads me to get stuck in a rut with certain color areas. Looking at this site was a good reminder to me to give named colors a try just because it will help me break out of my usual color habits.

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

#42

Post by knoebber »

I 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

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

#43

Post by leephillips »

jedberg wrote: post #32
signal11 wrote: post #28

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.

Out 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).

Some women are even tetrachromats, with four different color receptors (it’s pretty rare).

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

#44

Post by mpetroff »

jedberg wrote: post #33
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…

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.

This would be true if the CSS color names were actually reasonable, but many of them are not.

One would be better off using the results [1] of Heer & Stone (2012) [2] (or a similar analysis) to assign names to sRGB colors. You end up with 33 unique names instead of more than 100, and the number of unique names can be reduced further by merging synonyms.

[1] http://vis.stanford.edu/color-names/analyzer/ [2] https://doi.org/10.1145/2207676.2208547

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

#45

Post by signal11 »

jedberg wrote: post #32
signal11 wrote: post #28

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.

Out 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).

Yes; thanks for pointing that out, that's an important factor too, I guess.

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

#47

Post by jedberg »

leephillips wrote: post #43
jedberg wrote: post #32

Earlier quoted context omitted.

Out 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).

Some women are even tetrachromats, with four different color receptors (it’s pretty rare).

That's orthogonal though. Both men and women can be tetrachromats, it's just more common in women (but exceedingly rare in both populations).

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

#48

Post by jedberg »

mpetroff wrote: post #44
jedberg wrote: post #33

Earlier quoted context omitted.

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.

This would be true if the CSS color names were actually reasonable, but many of them are not. One would be better off using the results [1] of Heer & Stone (2012) [2] (or a similar analysis) to assign names to sRGB colors. You end up with 33 unique names instead of more than 100, and the number of unique names can be reduced further by merging synonyms. [1] http://vis.stanford.edu/color-names/analyzer/ [2] https://do…

It doesn't matter what the names are, the point is you can have a plugin that changes one color to another based on their names and what you can see. The names are a much smaller search space than "all possible hex codes".

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

#49

Post by mpetroff »

jedberg wrote: post #48
mpetroff wrote: post #44

Earlier quoted context omitted.

This would be true if the CSS color names were actually reasonable, but many of them are not. One would be better off using the results [1] of Heer & Stone (2012) [2] (or a similar analysis) to assign names to sRGB colors. You end up with 33 unique names instead of more than 100, and the number of unique names can be reduced further by merging synonyms. [1] http://vis.stanford.edu/color-names/analyzer/ [2] https://do…

It doesn't matter what the names are, the point is you can have a plugin that changes one color to another based on their names and what you can see. The names are a much smaller search space than "all possible hex codes".

I'd argue that the 147 named CSS colors are still too many (but definitely better than the ~16.8 million sRGB colors). Regardless, since hex codes are used in practice, they would still need to be dealt with.

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

#50

Post by n3k5 »

knuptfad wrote: post #16
johnsonap wrote: post #14

Some 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

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

Post reply on HN