0

A lot of my colleagues work in quite large companies and have created some very robust and large Design Systems, however, they always say that they haven't quite determined the Dark Theme color equivalents of their Light Mode or Base colors.

Is there a basic theory to how to convert colors to a dark mode theme? So far I have heard that desaturating the base color helps or increasing the lightness.

Personally I have all my base Design System colors in Light Mode written out as Hex and HSB (Hue, Saturation, Brightness) values. I'm wondering how to manipulate those values to create a dark mode equivalent.

I wish there was a rule or something like, "Decrease Saturation by 10-20 points + Decrease Brightness by 10 points".

I’m interested in the Hue Colors not grays. I also use a dark gray background base not pure black.

Has anyone had experience successfully creating a dark mode from a light mode palette with a set of rules other than just using their eye?

Improve this question
2
  • ux.stackexchange.com/a/141015/115107
    – Danielillo
    Jan 18 at 18:37
  • Unfortunately, I don't think you can apply a single formula like that. The human eye doesn't respond the same way to different colours at different contrasts. For low-light situations, our eyes respond more to blues but in bright light, we respond more evenly to the whole spectrum. Try asking over on the Graphic Design StackExchange: graphicdesign.stackexchange.com - they may be able to give you a better answer.
    – Roux Martin
    Jan 20 at 9:49

1 Answer 1

Reset to default
2

I created a dark mode for a start up website that was in stealth mode. The number one thing I learned was that you cannot use pure black as the background color you transition to. Use softer black colors that don't create such a harsh contrast for the user. Your text or other assets might be pure white and you don't want a pure black background as a contrast.

My suggestion is to use a dark grey color. It's softer and more helpful in this situation.

One article that i have found might help with this situation: https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

Also this one might help with picking the right darker color: https://blog.karenying.com/posts/50-shades-of-dark-mode-gray

I hope this helps. I'm sorry that i don't have a specific dark grey color to give.

Improve this answer
2
  • Thank you for the answer. Just to elaborate more, I’m thinking more about Hue Color not grays. I also have a dark gray background base rather than pure black. I’ll edit my question above. Thanks
    – Antistandard
    Jan 19 at 22:11
  • Hi @Antistandard: For hue, don't change it. Instead change only the luminance and if needed, the saturation. Use a perceptually uniform method (hint: not WCAG 2) ... Try APCAcontrast.com for lightness contrast and HSLuv.org for saturation. Second, spin around contrast center, which is somewhere between #999 and #aaa depending on a number of factors.
    – Myndex
    Sep 14 at 16:15

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.