2

I'm designing an IDE with dark UI. We have an existing color palette, but our (~10) greys seem off when applied to the IDE in the large quantities dark UI calls for.

When analysing each swatch, I realised that they don't belong to one HTML color family. Should variations of one color, within a good color palette, not consist of tints and shades of the same color or color family?

To add to my confusion, both Material Design (https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=263238) and Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/) contain grey palettes with greys from different HTML color families.

5
  • What do you mean by "HTML color family"? Feb 21 '20 at 12:44
  • I'd assume the OP meant that the grey is not pure. In a sense that it has different RGB values.
    – Paran0a
    Feb 21 '20 at 13:04
  • Thanks for wanting to help me! Yes, the way #636366 is part of the Comet color family (htmlcsscolor.com/hex/636366) as an example.
    – Marné
    Feb 21 '20 at 13:26
  • What do you mean "off"? Meaning "not gray"?
    – eclarkso
    Feb 21 '20 at 20:31
  • 2
    If you increase or decrease the brightness (moving closer to black or white) the color turns a bit dull, as adding more black or white means less color. Increasing the saturation avoids that, but does mean you deviate from what you call the color family. There is nothing wrong with doing it, it's personal preference whether you like it or not.
    – Martyn
    Feb 22 '20 at 0:47
1

There is no such thing as a HTML color family. HTML does have named colors, but they are just a label for a single color, they don't belong to a any group or family.

However, every color has a particular hue. You can generate a palette from a single color where you keep the hue consistent, yet change the darkness/lightness part of the color. The result will "feel" like a consistent group. You could call that a family, I suppose.

The reason popular UI frameworks don't use such single hue palettes is complicated, but in a nutshell:

  • Even if you increase/decrease lightness in equal steps, perceived brightness changes between equal steps are in fact not equal
  • Brightness across hues will not be equal. Example, green-6 will not be equally bright as blue-6

Both issues are rooted in the human visual system where perceived brightness depends on hue.

1
  • Ah, okay. Yes, darkness/lightness is what I meant by shades/tints. I was pretty hung up on adjusting hues mathematically, instead of focussing on perceived values. Thanks for clearing that up!
    – Marné
    Feb 25 '20 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.