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

by knuptfad • 5 years ago

559 159 5 years ago

knuptfad12• 5 years ago

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.

muli_d• 5 years ago

This is very cool, I love it. Thanks for sharing.

achairapart4• 5 years ago

Very cool. Please add permalinks/history state, so we can share specific hue or colors. Thanks!

uhtred• 5 years ago

Looks like it's on Github, you could submit a pull request to add those things :)

flanbiscuit• 5 years ago

I've needed this in my life so many times, thank you for creating this!

sam1r3• 5 years ago

Awesome! Could you possibly implement a double-click to clipboard copy option?

sam1r3• 5 years ago

Happy to make a PR or just do it quickly!

Edit: here you go 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

knuptfad12• 5 years ago

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

forgotmypw173• 5 years ago

Thank you for creating and sharing. Very nice app.

owly• 5 years ago

This is really well done. Congratulations on making such a useful tool. Thanks for sharing!

anarcat• 5 years ago

is 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• 5 years ago

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?

knuptfad12• 5 years ago

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.

reaperducer6• 5 years ago

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

Minor49er2• 5 years ago

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.

knuptfad12• 5 years ago

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!

Minor49er2• 5 years ago

That makes sense. Thank you!

tobr2• 5 years ago

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.

knuptfad12• 5 years ago

¯\_(ツ)_/¯

cialowicz2• 5 years 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.

SamBam3• 5 years 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/ 2. https://www.canva.com/colors/color-meanings/burnt-sienna/ 3. https://www.benjaminmoore.com/en-us/color-overview/find-your... 4. http://atelieracrylic.com/atelier-interactive/burnt-sienna/

buzzerbetrayed• 5 years ago

I tried to find brown on the slider to see what you’re talking about. Took me ages. Turns out you have to go REALLY red in order to find brown.

avianlyric2• 5 years ago

Worth 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

yreg• 5 years ago

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

munificent3• 5 years ago

CSS is just an embarrassment of mistakes:

   white-space: nowrap

So they take a word "whitespace" which needs no hyphen and jam one in. Then they take two completely distinct words "no wrap" and jam them together with no separator. And then you have to remember both of these on the same rule.

joegahona• 5 years ago

"White space" is two words, not one.

tshaddox2• 5 years ago

Also, the entire semantics are a bit strange. When I'm deciding whether I want text to line wrap, I don't really think about whether the whitespace should wrap. Yes, whitespace is somewhat relevant to the topic, since that's one option of where to break lines in order to line wrap, but I still think of it as the entire text that is line wrapping.

Oh, and don't forget that there is in fact a word-wrap property, which is a much better name for the previous behavior, but in fact only customizes how the line-breaking algorithm determines which words can be broken apart.

ericwood2• 5 years ago

Eh it's minor at best. I'll take it over "referer" any day.

runarberg6• 5 years ago

This is at the top of the list in the Incomplete List of Mistakes in the Design of CSS[1]. Which has been discussed several times on HN (last 2 months ago)[2].

1: https://wiki.csswg.org/ideas/mistakes

2: https://news.ycombinator.com/item?id=25891435

IncRnd2• 5 years ago

"Whitespace" in programming languages is a single word. "White space" in visual arts is composed of two separate words.

Waterluvian3• 5 years ago

I would be so lost if vscode didn't autocomplete css so well for me.

achairapart4• 5 years ago

But 'chucknorris'[0] is still my favorite red.

[0] https://stackoverflow.com/questions/8318911/why-does-html-th...

synn• 5 years ago

That's fun. I've coded this useless tool based on your comment: "What's Your HTML Color ?"[0]

[0] https://onivers.com/color.html

mceachen• 5 years ago

Yup. There's a bunch like that.

Know that CSS colors mostly came from X11: https://en.m.wikipedia.org/wiki/X11_color_names

The CSS team shares some blame, though: they adopted them (and they really didn't need to: they could have just supported rgb/hsb/lab triplets).

smoe3• 5 years ago

This just reminded me of the first bug of my career that took me hours trying to figure out. Colors weren't working correclty in IE 6 (pre IE Developer Tools) and I eventually learned that Firefox accepted both spellings "gray" and "grey", whereas IE only one of them.

Don't remember which one I used, but do remember that I went home early that day after that :/

achairapart4• 5 years ago

Some background about why dark gray is lighter than gray, plus some other idiosyncrasies:

https://en.wikipedia.org/wiki/X11_color_names#Clashes_betwee...

seabass• 5 years ago

And lavender is definitely not lavender.

parekhnish• 5 years ago

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

knuptfad12• 5 years ago

Good 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! :)

edwinyzh• 5 years ago

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

uxamanda• 5 years ago

Not sure about that one, but dodgerblue is named after the LA Dodgers, so seems possible :-) https://en.wikipedia.org/wiki/Dodger_blue

runarberg6• 5 years ago

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

knuptfad12• 5 years ago

"chartreuse" name is coming from the chartreuse drink, which is a highly alcoholic and green colored booze :)

reaperducer6• 5 years ago

"Goldenrod" looks like a field of goldenrods.

runarberg6• 5 years ago

After 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

2: https://en.wikipedia.org/wiki/Shades_of_brown#Peru

wmil• 5 years ago

Yes, Peru used to export pottery with a distinct brown colour. Prior to cheap air travel travelling to Peru was rare but the pottery was common. So "Peru pottery brown" was just called "Peru" when talking about colours.

johnsonap• 5 years ago

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

knuptfad12• 5 years ago

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.

n3k5• 5 years 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.

formerly_proven• 5 years ago

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.

mcv• 5 years ago

Some of these colour names make little sense. For example, 'chocolate' is surprisingly light. 'brown' is red.

dfox• 5 years ago

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

avianlyric2• 5 years ago

[1] https://www.youtube.com/watch?v=wh4aWZRtTwU

meristem3• 5 years ago

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.

meristem3• 5 years ago

You may be familiar with this type of request: file it under "SCOPE CREEP"

knuptfad12• 5 years ago

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.

thitcanh• 5 years ago

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.

meristem3• 5 years ago

This 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• 5 years ago

i love this. you now have the honor of making it into my "Tools" bookmarks folder.

crazygringo3• 5 years ago

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.

codazoda• 5 years ago

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.

yyx• 5 years ago

A good IDE will show a color preview https://code.visualstudio.com/assets/docs/languages/css/colo...

lucideer2• 5 years ago

"lightsalmon" is more descriptive to me than "#FFA07A" or "rgb(255, 160, 122)"

While I agree, I feel that learning to look at "#FFA07A" and immediately grok "pink" has been of general benefit to me as a frontend dev.

or "hsl(17, 100%, 73.9%)" at a glance

I must admit though that I haven't mastered identifying hue by number just yet (though if I do, it will be even better as Saturation and Lightness/Luminosity are much easier to reason about).

Ashanmaril• 5 years ago

It's more descriptive, but usually you design UIs for the user, not for the developer writing the CSS

NetOpWibby2• 5 years ago

I have had my favorite hex memorized since about 2012: #07D0EB

jedberg5• 5 years ago

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.

mpetroff2• 5 years ago

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

crazygringo3• 5 years ago

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.

reaperducer6• 5 years ago

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.

Does this exist, or is this hypothetical? If it exists, it's something I would add to my toolkit.

kall2• 5 years ago

I feel pretty confident saying that is not a relevant use case. I used to use a hand written user stylesheet for color accessibility and know various people using different tools to get the contrast they need. Named colors are not a factor.

munificent3• 5 years ago

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.

ericwood2• 5 years ago

I've never used them or seen them used for large-scale production sites but I reach for them all the time when building out small proof of concept or isolated examples for debugging in places like Codepen. It's handy to have a few appealing colors memorized when you're sketching things out.

smoe3• 5 years ago

When I started web dev in the early 2000s, I remember it being recommended to use the named colors because of them being more consistent accross different monitors. Not sure if this was true at all and/or only for the original 16 basic colors.

Nonetheless, I kept using them for a while, because I think it makes the css easier to read, when having names (even suboptimal ones) over hex codes.

But with the introduction of css preprocessors in the late 2000s that allow defining variables, I have not used them since.

xmprt• 5 years ago

This might be a dumb question but how would named colors be more consistent across monitors? I thought they mapped to the same RGB value so there would be no difference between 'red' and #FF0000.

qwertox• 5 years ago

In my case it was the convenience of directly adding the alpha channel value which made me move to `rgba()`

blondin• 5 years ago

i believe it's not common to use css color names. i wish more colors were defined and people used them more though. it provides a very consistent color re-use.

the best example i can think of is this fire demo on codepen, which i bookmarked because i really liked the color names: https://codepen.io/jscottsmith/pen/dwZjWK

forgotmypw173• 5 years ago

Code is poetry when written as such,

Words in stead of numbers add a nice touch

Those who treat it as craft and an art

May find that named colors are a good start.

LegitGandalf• 5 years ago

So whether your colors be blue

Or red or lightsalmon or yew

Remember that if life is rough

Just add in a little more peachpuff!

whatshisface• 5 years ago

It still should be doubly stressed,

that you could use something like LESS,

to substitute code arbitrarily,

for the readable name that's there really.

devmunchies• 5 years ago

*snap snap snap snap snap*

ancarda• 5 years ago

Sure. I use the colors peachpuff+red and green+lightgreen when I need to show a success or error/warning box. Like so:

    .notice {
        padding: 1em;
        border: 1px solid black;
        margin-bottom: 1em;
    }
    .notice.warning {
        background-color: peachpuff;
        border-color: red;
    }
    .notice.success {
        background-color: green;
        border-color: lightgreen;
    }

I think the end-result is pretty nice.

enhdless• 5 years ago

Nice. Pasted it in a fiddle: https://jsbin.com/teyupesuqu/1/edit?html,css,output

SavantIdiot• 5 years ago

Up until I started using SASS and working with designers who picked color palettes (or changed them FREQUENTLY!) I always used named colors. But with so many minute tweaks in the RGB hex values each UI review, the names lost meaning.

runarberg6• 5 years ago

As a webdev who is used to have professional designers by my side at my day job, lacking the color touch of an expert, I usually just pick a random named color for my hobby projects:

https://github.com/runarberg/random-go-stone-placements/blob...

quickthrower22• 5 years ago

I like the names ones due to lack of imagination: I just try a few names ones until it looks good. I have used light salmon before! In fact I used some names ones on a side project today.

mutatio• 5 years ago

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

Are you using CIE* colorspace to match?

knuptfad12• 5 years ago

Thanks. Colors are sorted just based on their hue, saturation and lightness.

signal112• 5 years ago

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.

jedberg5• 5 years ago

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

leephillips• 5 years ago

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

signal112• 5 years ago

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

munificent3• 5 years ago

Color 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• 5 years ago

Thats pretty darn dope.

knoebber• 5 years ago

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

knuptfad12• 5 years ago

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.

nc• 5 years ago

Lovely - you should make url reflect the slider state for easy sharing.

Etheryte• 5 years ago

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

netmare2• 5 years ago

This is very nicely done, but I still prefer the simplicity of <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.

reaperducer6• 5 years ago

This one works on mobile. The one you linked to does not.

netmare2• 5 years ago

What 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• 5 years ago

Slightly off topic, I always thought named CSS colors are generally ignored (in favour of 'rgba' / '#hex').

Are named CSS colors seeing any practical use?

reaperducer6• 5 years ago

I see them used a lot in SVGs. But I don't know if that's a technical issue, or programmer preference.

flixic• 5 years ago

For some reason, #000 or #000000 doesn't always work, but 'black' does. Never spent much time figuring out why.

frosted-flakes• 5 years ago

Black 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• 5 years ago

Who decided that 'lightpink' should be darker than 'pink'?

Also, nice project :)

GrazeMor• 5 years ago

Colors appear different depending on what color they are next to so its not a great way to pick colors.

jedimastert• 5 years ago

I didn't realize there are a WACKTON of named CSS colors. Weird

legitster• 5 years ago

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

saalweachter2• 5 years ago

Huh, I always thought chartreuse was a red-ish color.

Antipode• 5 years ago

That's a fairly common misconception for some reason.

saalweachter2• 5 years ago

The Mandela effect strikes again.

throwaway888abc• 5 years ago

Super helpful, bookmarked, Thank You

cjboco• 5 years ago

There’s an attempt to name ALL the rgb web space colors... https://colornames.org/

b0afc375b5• 5 years ago

I wanted to add Violet Evergarden to one of the colors, but there are already 22 Violet Evergardens. Lol.

sam1r3• 5 years ago

Awesome! Could you possibly implement a double-click to clipboard copy option?

IncRnd2• 5 years ago

It'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• 5 years ago

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

Waterluvian3• 5 years ago

Is 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• 5 years ago

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

Waterluvian3• 5 years ago

Thank you so much. Your response nails exactly what I was curious about.

frivoal2• 5 years ago

Here's a greatly entertaining talk about the whacky history of the bizarre naming of colors in CSS: https://www.youtube.com/watch?v=HmStJQzclHc

bengtan• 5 years ago

My version: https://bengtan.com/css-named-colours-picker/

danicrack• 5 years ago

very beautiful

breck• 5 years ago

This was really fun to play with. Interesting patterns going on there.

I think /r/InternetIsBeautiful/ may like this.

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

Related Stories