# How to get uniform appearance of color brightness

**URL:** <https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471>\
**Category:** Coding Questions\
**Created:** [March 7, 2020, 2:41am UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471 "2020-03-07T02:41:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [March 7, 2020, 2:41am UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471/1 "2020-03-07T02:41:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bc346127ddb67baa02fde3177f79dd59b333ce85.jpeg)

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6c414466a9b58ee852829da12add40e9f472192c.jpeg)

Saturation 0.3

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/322280c38f094643940f9c5cb9f475081d647fa2.jpeg)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 7, 2020, 10:41pm UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471/2 "2020-03-07T22:41:34Z")

</div>

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

For general background:

- [https://en.wikipedia.org/wiki/CIELAB\_color\_space](https://en.wikipedia.org/wiki/CIELAB_color_space)

---

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [March 8, 2020, 1:46pm UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471/3 "2020-03-08T13:46:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 8, 2020, 5:14pm UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471/4 "2020-03-08T17:14:32Z")

</div>

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](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:

> <https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2017/05/hsluv/hsluv.pde>

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [March 8, 2020, 5:50pm UTC](https://discourse.processing.org/t/how-to-get-uniform-appearance-of-color-brightness/18471/5 "2020-03-08T17:50:24Z")

</div>

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](http://github.io).