Hacker News Reader

Comment by crazygringo | Hacker News Reader

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.

View on HN

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!

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

*snap snap snap snap snap*

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.

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

Awesome if you're in your office on your usual work computer. Not great if you're in the field trying to make quick fixes on whatever terminal a client provides.

In which reality do you need to monkey patch CSS color values on a terminal directly to production? With no possibility of running a IDE?

I doubt many web developers will ever find themselves "on the field" with someone else's computer and no web browser to work with.

Is there any tool that you can rely on if you're "in the field" on "whatever terminal a client provides?"

And if you use a CSS pre-processor or—better yet—CSS custom properties you get your descriptive color anyway:

    --text-color: cornsilk;
    --background-color: peru;

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

I always found hex codes non-intuitive, but the hue values are easy once you just remember:

0 = red

120 = green

240 = blue

Then you just interpolate as desired, so yellow is 60, orange is 30, red-orange is 15.

And really all you need to remember is red = 0 (lowest energy wavelength) and the three RGB primaries are spread evenly around the 360° color wheel, therefore 0, 120, 240.

If you're good at knowing how colors mix, RGB values are also very intuitive, since they're literally in RGB order and the the closer to FF it is, the more of that color is in it.

But I hadn't spent the time to look at hue values, so your chart helped me get better at them.

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

Sorry I don't understand your comment?

This thread is about developers writing CSS...

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

Nice, nearly analogous to mine (#004CFF) [0].

[0]: https://duckduckgo.com/?q=%23004cff

Solid, I like that a lot.

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.

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

I weirdly miss colour limitations!

That said where is my UV value?

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

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

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.

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

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

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.

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.

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

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.

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.

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.

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

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.

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

Reply on news.ycombinator.com