I have an application where users select a color, and then the rest of the color scale is generated based on the selected color, for a total of 10 colors. Suppose I select golden yellow as my original color. The rest of the 9 colors, will be derived based on that color.

I want to maintain luminance even if the hue is changed. For example, in this image, all colors in at the same position have around the same luminance:

Color scale examples

I had been doing this derivation of colors in the RGB color space without any attention to perceived lightness/darkness of the derived colors.

Here’s how I had gone about it:

1. First I derive the luminance of the selected color.
2. Then, based on the luminance, I assign the color a position out of 10 on the color scale. I created a reference table of relative luminance value range for each color.
   Reference table of luminance value for each position in the color scale
3. Now, the lighter and the darker colors need to be derived.

My idea is that if I convert the original color to HSL, then I can just modify the lightness value to achieve the rest of the colors. Basically, given a specific hue and saturation values, and knowing the desired luminance, I would like to derive the lightness values.

I also looked into the HCL color space but I don’t understand it, plus it seems complex. In HSL, I just need to change the lightness value, but in HCL, I think multiple values need to be changed.

I am not a programmer. I am a designer. I have little knowledge of Javascript. I tried these things out to the best of my knowledge and using ChatGPT, but I have reached my limit.

Please help me. I don’t even know if what I am trying to do is possible or not. Maybe it’s not the best way to do it. If you can suggest an alternative approach, that too would be great too.