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

141–150 of 167 posts

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

#141

Post by sellyme »

Waterluvian wrote: post #133

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?

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

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

#142

Post by bostonvaulter2 »

preommr wrote: post #121
uhtred wrote: post #61

Earlier quoted context omitted.

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

It's always the smiley face that takes a comment from idiosyncratic but potentially earnest to condescending and passive-aggressive.

Is that really how people are perceiving smiley faces nowadays? I make rather extensive use of smiley faces and smiling emoji and I would hate for them to be received in that manner, rather than what I intend, which is an authentic smile.

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

#143

Post by kall »

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.

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.

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

#144

Post by Waterluvian »

sellyme wrote: post #141
Waterluvian wrote: post #133

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?

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…

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

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

#145

Post by kall »

crazygringo wrote: post #54
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.

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…

For contrast, css can be quite effective. A brute force background black, text white, link yellow has served me very well. For color blindness correction an OS level filter is the way to go.

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

#146

Post by anarcat »

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.

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?

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

#147

Post by forgotmypw17 »

whatshisface wrote: post #124
forgotmypw17 wrote: post #116

Earlier quoted context omitted.

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.

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.

I don't believe in letting

Someone else's code munge my code

Decreasing its readability for others

And possibly introducing unforeseeen issues

Only to save a few bytes here and there

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

#148

Post by enhdless »

ancarda wrote: post #118
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…

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.

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

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

#149

Post by NetOpWibby »

codazoda wrote: post #26
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.

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

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

#150

Post by frivoal »

tshaddox wrote: post #77
munificent wrote: post #38

Earlier quoted context omitted.

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 .

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…

The naming is far from great, but there is a method to the madness. Here's a talk I did a while back on how various line breaking things fit together: https://cssday.nl/2019/speakers#florian
Post reply on HN