Inconsistent lightness

[MrFussyfont]

My main interest in this plugin is to generate a palette with consistent perceived lightness and therefore consistent contrast ratios regardless of hue. However, some generated colours are darker than others, which was unexpected:

Using the Sim Daltonism app to view as monochrome, you can see that the greens are darker than the other colours.

[a-ng-d]

Hello @MrFussyfont, Thanks for reporting this issue. Globally, some shades might be forced to be within the sRBG gamut (one the limit of the LCH color model), giving a lag between colors. Can I get your starting colors (and your lightness scale configuration) in order to test on my side?

[MrFussyfont]

Lightness is pretty close to 10 to 100 in steps of 10:

Starting colors: 064D58, 4D555B, 119029, 005A7A (and more, but these are enough to see the problem)

[MrFussyfont]

I see what you mean about LCH colors outside sRGB. I also noticed a bigger difference when Figma's color space is set to "Unmanaged" vs. sRGB. The screenshot I posted yesterday was taken with the "Unmanaged" setting.

I've been trying several different color tools. I'll do some more comparison with others to see how they are generating more consistent lightness. I suspect they are keeping lightness consistent at the expense of chroma and/or hue.

[a-ng-d]

Thanks both for sharing your configuration with and your observation 👍 I'm gonna investigate.

[MrFussyfont]

Using the same source color #2C7B84 in Leonardo, and distributing lightness equally (using the "Distribute" dropdown after changing min/max lightness to 25/95), I get this:

In the "Use" tab I can output CSS in LCH format:

--Teal100: lch(95%, 3, 210deg); --Teal200: lch(86%, 8, 207deg); --Teal300: lch(78%, 12, 209deg); --Teal400: lch(69%, 16, 208deg); --Teal500: lch(60%, 20, 209deg); --Teal600: lch(51%, 23, 209deg); --Teal700: lch(42%, 22, 210deg); --Teal800: lch(33%, 18, 211deg); --Teal900: lch(25%, 15, 208deg);

So it's definitely adjusting chroma and hue. I guess this issue and the other one I posted about saturation are strongly related: if you can find a good formula to adjust chroma and hue, you can get a more consistent and pleasing palette?

[MrFussyfont]

Here's a clue: on the "Chromacity" tab, it gives you the model and formulas(?):

[MrFussyfont]

Similar results in Supa Palette plugin (7-day free trial):

[a-ng-d]

Nice tips! It may help improve a lot the shades generation algorithm!

[a-ng-d]

Hello @MrFussyfont, I wanna show you a first audit about the palette generation (I have used your configuration). You can take a glance at this report. The next step is to improve the algorithm through its generation.

[MrFussyfont]

@inVoltag Thank you, but I'm not sure what I'm looking at in your report. Are these just the numbers from my colours using the existing algorithm? What are the "consolidation" graphs?

[a-ng-d]

@MrFussyfont That is a detailed report about your palette generated with the current algorithm. You can both observe Chroma and Hue progression through the lightness configuration. The consolidation charts aggregate each values of Lightness, Chroma and Hue from the source colors. The purpose is to both make a comparison and watch the progression. I noticed the Chroma is not regular nor close to 0 at the limits. Chroma must be closed to the center of the wheel at the top and bottom of the cylinder. So, I'm working on improving the Chroma direction. I got to "bend" its curve, so both of the Hue and Lightness are smoother. Here is a Figma document to watch the result. Feel free to give me your feedback.

[MrFussyfont]

@inVoltag That's very interesting, thank you! The improved algorithm definitely produces more consistency in the lightness, though not as consistent as Leonardo. Comparing through a monochrome filter (Leonardo palette below yours):

I would need to spend a lot more time to really understand the complexity (so forgive me if I'm asking too much of a free plugin!), but I guess the ideal would be something like sliders to control the amount of lightness "correction" and/or the chroma and hue curves/adjustments.

I don't know if I mentioned Primer Prism, but it takes this idea to an extreme where you can adjust the curves manually and then optionally apply them to all colors in the palette! See https://primer.style/prism/

[a-ng-d]

Hi @MrFussyfont, We are closer than before. There is still some improvements to bring more consistency. Nevertheless, I reached my limit in algorithm because I tried several formulas in vain. That's because the chroma curve must follow the sRGB gamut shape according to the hue value. So the complexity is proven and it needs more research to get closer to the following image:

The current improvement is a first step and you may keep contributing to find together the golden formula.

[a-ng-d]

Thanks for sharing Prism, it is a good inspiration for a next evolution to adjust the chroma.

[MrFussyfont]

Colour is hard. Thanks for your efforts!

[a-ng-d]

The version 20 has been released. I suggest you to enable the algorithm in settings because this difference can be noticed (could be annoying for others users). You can test now then give me your feedback.

[MrFussyfont]

Thanks, looks good! I like having the option to switch the algorithm. Although the lightness is not as consistent as I would like, I'll mark this as resolved.