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

111–120 of 167 posts

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

#111

Post by smoe »

xmprt wrote: post #108
smoe wrote: post #91

Earlier quoted context omitted.

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…

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.

I remembered it wrongly. It wasn't about named colors, but "web-safe colors" that can be displayed by 256 color displays directly, without having to fallback to the closest color or by using dithering. Some of them happened to have a name attached to it. Don't know if the original 16 named colors are also all safe colors.

https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors

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

#112

Post by IncRnd »

munificent wrote: post #38
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.

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 .

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

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

#113

Post by SamBam »

jedberg wrote: post #75
reaperducer wrote: post #70

Earlier quoted context omitted.

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.

I honestly don't know, it's just what I was told by someone who is visually impaired a long time ago. That it's easier if people use the names instead of the hex codes because then they can more easily convert that.

As others say, this sounds unlikely and unwieldy. It also doesn't quite make sense. How would it help to change "lightyellow" to "yellow", say, without knowing the contrast of the other colors next to it? Are you trying to darken it or lighten it?

It would make much more sense to do something check the lightness ratio between the foreground and background colors, and increase that ratio on the fly. Chrome can already tell you if the color ratio is too low to pass accessibility guidelines. There are a number of plugins that do this, like Color Enhancer [1] or High Contrast [2].

1. https://chrome.google.com/webstore/detail/color-enhancer/ipk...? 2. https://chrome.google.com/webstore/detail/high-contrast/djcf...

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

#114

Post by hunter2_ »

regularjack wrote: post #103
uhtred wrote: post #61

Earlier quoted context omitted.

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

I think giving feedback is a valid way to contribute, I certainly would welcome feedback if it were my project. Not all contributions must be code.

Normally I'd say "the feature request should still be made on GitHub even if it's not code" except for the fact that this is a Show HN which seems just as valid of a receiving area.

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

#115

Post by forgotmypw17 »

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.

Thank you for creating and sharing. Very nice app.

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

#116

Post by forgotmypw17 »

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…

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.

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

#117

Post by flixic »

reaperducer wrote: post #67
thih9 wrote: post #65

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?

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

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

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

#118

Post by ancarda »

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.

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

#119

Post by frosted-flakes »

thih9 wrote: post #65

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?

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.

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

#120

Post by LegitGandalf »

forgotmypw17 wrote: post #116
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…

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.

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!

Post reply on HN