4 ms·

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

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

PaulHoule 3y ago
Once you have a color system, however, it can be very easy to work within it an maintain the visual "brand promise".
- chiefalchemist 3y ago
  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.
  - karaterobot 3y ago
    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!
    - chiefalchemist 3y ago
      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?
  - PaulHoule 3y ago
    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.
  - kyleyeats 3y ago
    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.
seanwilson 3y ago
> 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/ https://design-system.service.gov.uk/styles/colour/ and https://getbootstrap.com/docs/4.0/utilities/colors/ https://getbootstrap.com/docs/4.0/utilities/colors/. Or use an existing large palette like https://www.ibm.com/design/language/color/ https://www.ibm.com/design/language/color/, https://www.radix-ui.com/colors https://www.radix-ui.com/colors or https://designsystem.digital.gov/design-tokens/color/system-tokens/ https://designsystem.digital.gov/design-tokens/color/system-... (these ones have nice rules about which colors contrast with others).
- chiefalchemist 3y ago
  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?

PaulHoule 3y ago

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

chiefalchemist 3y ago
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.
- karaterobot 3y ago
  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!
  - chiefalchemist 3y ago
    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?
- PaulHoule 3y ago
  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.
- kyleyeats 3y ago
  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.

seanwilson 3y ago

> 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/ https://design-system.service.gov.uk/styles/colour/ and https://getbootstrap.com/docs/4.0/utilities/colors/ https://getbootstrap.com/docs/4.0/utilities/colors/. Or use an existing large palette like https://www.ibm.com/design/language/color/ https://www.ibm.com/design/language/color/, https://www.radix-ui.com/colors https://www.radix-ui.com/colors or https://designsystem.digital.gov/design-tokens/color/system-tokens/ https://designsystem.digital.gov/design-tokens/color/system-... (these ones have nice rules about which colors contrast with others).

chiefalchemist 3y ago
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?