How to get uniform appearance of color brightness

Is there a formula to adjust HSB values to adjust the apparent brightness of colors? Everything except the greens and blues seem way too dark here, I was hoping for a more uniform appearance. The background is 50% gray.

Here, the hue is set to match the angle of each hexagon, the brightness of each ring is mapped by the code below. Each hexagon in a ring has the same brightness value set by thisRingFillBrightness, and saturation is 0.75/1.0.

for (int ring = 0; ring < rings.length; ring++) {
   float minFillBrightness = 50/255f;
   float maxFillBrightness = 255/255f;
   float thisRingFillBrightness = map(ring, 0, rings.length, minFillBrightness, maxFillBrightness);

I see if the saturation is decreased, then the brightness becomes more uniform for the blues, violets, and reds.

Saturation 0.5

Saturation 0.3

1 Like

HSB is terrible for this – instead, look at past forum resources for using CIELAB colorspace.

For general background:

1 Like

Thank you for the suggestion. I have actively avoided thinking about LAB color for 20 years but now it’s time.

1 Like

For me it is always a good time to not think about LAB. But when what you want is “perceptually uniform color” your back is against the wall.

A more recent option is HSLuv. It is fairly easy to use in p5.js.

There isn’t a Processing (Java mode) HSLuv library that I am aware of, but I see that @hamoid played around with using HSLuv in a sketch a little while ago:


Reminder to myself: upload to GitHub all my (hundreds of) sketches. Maybe they help someone…

I haven’t done that because who would go through so much stuff? With no descriptions or thumbnails? Solution: clean up, index and upload one per day. Start on March 16th. Make a page on