How to get uniform appearance of color brightness

Processing Coding Questions
1

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.

image
image1198Ă—1104 553 KB 

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

image
image1198Ă—1049 495 KB

Saturation 0.3

image
image1152Ă—1075 456 KB

1 Like
2

HSB is terrible for this – instead, look at past forum resources for using CIELAB colorspace. https://discourse.processing.org/search?q=cielab

For general background:

1 Like
3

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

1 Like
4

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.

https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html

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:

2 Likes
5

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 github.io.

2 Likes