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

1–10 of 167 posts

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

#2

Post by knuptfad »

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

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

#4

Post by Minor49er »

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

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

#5

Post by knuptfad »

arkitaip wrote: post #3

Ooh 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?

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

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

#6

Post by knuptfad »

Minor49er wrote: post #4

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

Thanks, 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!

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

#7

Post by [deleted] »

knuptfad wrote: post #6
Minor49er wrote: post #4

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

Thanks, 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 dimens…

[deleted]

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

#8

Post by muli_d »

knuptfad wrote: post #2

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

This is very cool, I love it. Thanks for sharing.
Post reply on HN