My color palette looks brighter on a dark background. How can i compensate this? Any math formula?

1

I am trying to make a new color palette for the Linux Mint Mint-Y GTK theme. I didn’t have much knowledge of colors, at first, but i took the time to read a few things and i even developed my own method to determine the right color values. So i have made this new color palette:

#DF2121 Red
#EF6410 Orange
#EFB810 Yellow
#38A960 Mint 140
#18A6A6 Aqua
#1E78D2 Blue
#951595 Purple
#767676 Grey
#E2346F Pink
#107070 Teal
#867646 Sand
#62370E Brown

There is only one thing i can’t find any answer for. I need to duplicate all these 12 #HEX values and make them slightly less saturated and just a bit darker for the Mint-Y-Dark themes. Because these colors will be placed against a dark background, in this dark theme variant. This background: #404040. We want these 12 colors to be perceived about the same as they are perceived with a white background.

Short story: These colors need a very subtle compensation to look the same when placed on a dark background. Something like, huh, say 10% less saturation and 5% less lightness. Just one question: is there a way to calculate precisely the required adjustments? Thanks.

2

If you design your colors using HSLA (recommended) then there is in fact a formula for contrast ratio. There are also handy tools like this one that will calculate the contrast ratio for you.

3

Thanks. I did use HSL. In Inkscape. And i did use color contrast measurements tools to make sure i got at least 3:1 contrast for these background colors with a white text foreground. But what i was looking for is something a bit more subtle and just a bit different. I want this nice blue, for example, to be perceived as being the same blue when placed against a #404040 dark background. Yes, this background color will be surrounded by another background. These colors were chosen with a white background, but then there is the Mint-Y-Dark theme variants to think about. Anyway, i was thinking about this and it is just about a subtle difference in human perception, so maybe there is just no maths to solve this problem, maybe i should just make something approximate…

4

Images are worth a thousand words. I should have posted this first:

Mint-Y-Colors-40
Mint-Y-Colors-401920×1080 194 KB

Columns 0, 1 and 2 are just the firsts steps. The “final product” is column 1a or 2a.

5

Yeah, there’s math on contrast but “looking good” is done by feel.

If you look at most dark modes, you’ll notice that the general approach with colors is to decrease saturation and increase lightness.

6

This formula is impossibly complicated, as it hugely depends on size of the object, hue, initial luminosity, environment etc etc etc… Generally decreasing saturation by 10-15% and luminosity by 15%-20% depending on hue and initial luminosity will do the job :slight_smile:

If you want to design colors that look equally great on dark and light backgrounds you need to stick to the contrast ratio, particularly:

let ldRatio = 10.36
// color contrast ratio between light (white) and dark (#404040) background

let midRatio = Math.sqrt(ldRatio);
// 3.21 Adjust luminosity (and saturation) of any hue to get this contrast ratio

Good luck!