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:
#38A960 Mint 140
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.
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.
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…
Images are worth a thousand words. I should have posted this first:
Columns 0, 1 and 2 are just the firsts steps. The “final product” is column 1a or 2a.
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.
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
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