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.

Improve this question
5
  • What do you mean by "HTML color family"?
    – James Coyle
    Feb 21, 2020 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, 2020 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, 2020 at 13:26
  • What do you mean "off"? Meaning "not gray"?
    – eclarkso
    Feb 21, 2020 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, 2020 at 0:47

1 Answer 1

Reset to default
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.

Improve this answer
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, 2020 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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