For context, I'm using Tailwind CSS which has a lightness scale for its colors of 100-900, with 100 being the lightest and 900 being the darkest.

I also designed my app for dark mode first.

Let's take the sidebar and main content area as an example for my question, even though I'd like a general principle to use across most or all of the app. My sidebar is 900 and the main is 800, so the sidebar is just a little bit darker.

In light mode, would the sidebar be lighter than the main? E.g. sidebar is 100, the lowest instead of the highest on the 100-900 scale, and the main is 200, the second-lowest instead of the second highest. Basically, you look at 450 on that scale, the middle, as zero and 100 is negative and 900 is positive, so dark mode is basically negating the lightness value for an element. Preserving absolute value, the distance from 450.

Or instead of preserving absolute value, do I preserve the lightness of an element relative to a sibling? The sidebar is 100 points darker than the main, so in light mode the sidebar should be as light as it can possibly be while allowing for the main to be 100 points lighter.

Am I flipping the 100-900 scale around the 450 midpoint or am I sliding the scale with 800 and 900 moving down to 100 and 200 respectively?

  • A big example of an app is Discord. In settings, the sidebar is darker than the main area whether you are in dark mode or light mode. Discord, then, is using relative lightness and sliding the lightness scale instead of flipping it.
    – 1dymium
    Jan 11 at 3:09
  • There's no right answer with this sort of thing. Color theory is a very deep subject. Jan 11 at 13:05
  • A simple scale shift or an inversion is a great place to start a new colour system but you will need to make another pass over it checking for things like contrast and definition are strong enough - especially if you're dealing with accessibility requirements too. Jan 11 at 14:43

Your Answer

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