Hacker News new | past | comments | ask | show | jobs | submit login

I'm not a trained designer, and for that reason I would never attempt to design a color system with six different colors, and then shades / tones within each. Is that not overkill and unnecessary?

Mind you, I appreciate the suggestion to avoid Tool X (i.e., in this case HSL) but I can't help but believe they did themselves a disservice by choosing a six-color color system to begin with. In my eyes, mind and heart accessiblity and simplicity go hand in hand.

Fact: There's not a user in the world who wakes up and thinks "My day will be made if and only if I visit a site with an overly complicated color system."




> I'm not a trained designer, and for that reason I would never attempt to design a color system with six different colors, and then shades / tones within each. Is that not overkill and unnecessary?

At a minimum, most web UIs grow to need:

- Several greys (borders, headings, body text, boxes), a primary/accent color (to show what's clickable), green (to show success), red (for danger) and orange/yellow (for warning).

- If you then want to show success/danger/warning alerts/badges/icons/buttons, you'll usually want extra shades of each for the borders/background/headings/text.

- For buttons, you'll usually want shades of at least your primary color for the background of each normal/hover/clicked/disabled state too.

- At that stage, you may as well have shades/tones ready for the other colors in case you need them in the future so you don't have to keep coming back to it. You could get by for a while by generating new color variants from existing colors with shortcuts like using transparency or contrast filters, but the feel/branding of these probably won't be ideal compared to more designed palettes.

- From a light theme, you'll need to tweak the colors to get a dark theme, usually reducing saturation as the colors become too bright on a dark background.

You can get pretty far with a restricted palette though e.g. https://design-system.service.gov.uk/styles/colour/ and https://getbootstrap.com/docs/4.0/utilities/colors/. Or use an existing large palette like https://www.ibm.com/design/language/color/, https://www.radix-ui.com/colors or https://designsystem.digital.gov/design-tokens/color/system-... (these ones have nice rules about which colors contrast with others).


Yes, but do they grow because they can? Or do they grow because they should?

Put another way, how many users are going to understand ALL those shades and subtle signals in a don't-make-me-think (i.e., Steve Krug) sort of way?

And how accessible are all those (too often) lower contrast combos?

I appreciate the finer points of your answer but it still feels to me like designers are imposing their form-over-function will on the users, and shouldn't we be past that at this point?

That is, ultimately, was HSL The Problem? Or was is more guilt by being in the wrong place, used in the wrong way, at the wrong time?


> Yes, but do they grow because they can? Or do they grow because they should?

So see Bootstrap's alerts for example (not known for being overly flashy):

https://getbootstrap.com/docs/5.0/components/alerts/

They've got primary, secondary, warning, danger and info and alerts. Each one has a unique background, border and text color, and the text contrast meets accessibility standards. So that's 15 colors just there.

Alerts like this are super common for any UI with forms. You could simplify each alert to use only one or two colors (which puts limits how you can make them look), but do you think this example is over designed as is?

> Put another way, how many users are going to understand ALL those shades and subtle signals in a don't-make-me-think (i.e., Steve Krug) sort of way?

You'd assume the user can tell the danger color from info, but the different shades of the danger color wouldn't have a different meaning except for emphasis and to help with the information hierarchy. Even if your UI was greyscale, you'd want different shades to help here too.

Can you point to a UI you like? How many colors and shades does it have?


My understanding is color alone is not enough as a signal for alerts. There are enough people who have issues with color differentiation that color isn't enough. So if we presume this to be true - and it is :) - well now we've add all these colors to "the brand" *and* also have too much confidence in what they can accomplish for all users.

Look. I'm not saying there's absolute right or wrong. But I do believe there's enough myths and false gods kicking around that someone needs to stand up and say, "Wait a minute..." I'm that guy today. I'm that person.


> My understanding is color alone is not enough as a signal for alerts. There are enough people who have issues with color differentiation that color isn't enough.

Yes, it's standard practice that you don't rely only on color for information. But for people that can see those color differences (about 90% of the population don't have color blindness) it's a very worthwhile improvement so isn't it overkill to ignore these people? And what's the problem with tweaking the shades so they match the brand a little better?

What are you advocating as an alternative? How many colors and shades?


If you want a CSS color system that easily creates shades/tints, use HWB (Hue-Whiteness-Blackness). It directly maps to simple artist sensibilities and is far less confusing than RGB/HSL and the new LCH/OKLCH

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...


You should have a look at https://www.hsluv.org/comparison/. It's simple to use like RGB/HSL/HWB, but unlike them makes it easier to find accessible colors as the perceived lightness of a color only changes when you change the L param.


Once you have a color system, however, it can be very easy to work within it an maintain the visual "brand promise".


I understand and appreciate brand, identity, marketing, and so on. And based on that experience, I can say with confidence: if your brand needs six colors and shades / tones within each to make a "promise" you need to so rethinking and redesigning. No "promise" that complicated is going to stick.


You began by saying you aren't a trained designer, and ended by telling most of the industry it is doing it wrong. You've come a long way in a short time, congratulations!


Yes and no, but mostly no :)

As a user of their "doing it right" - and feeling under-satisfied too often - maybe they should be listening more, and imposing their will on the rest of us less? Or do I roll over and play brain dead because I'm told to do so?

I happen to believe less is more. And I've seen that work well / better often enough. If mo' mo' mo' is so great, why am I not seeing it and feeling it?


The very conventional search form for the site I work on has six colors that are obvious including the white background.

I am looking at a picture of an anime character (Kizuna Ai) on my wall and it has two shades of five colors plus one shade of blue used in the background for a total of 11 shades.


It's more like: You're going to need six simple colors eventually, and when you do you want versions that work with your brand colors.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: