# How to calculate the shades of a color?

**URL:** <https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426>\
**Category:** Coding Questions\
**Created:** [February 15, 2019, 4:58pm UTC](https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426 "2019-02-15T16:58:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bobw](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@bobw](https://discourse.processing.org/u/bobw)\
**Post date:** [February 15, 2019, 4:58pm UTC](https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426/1 "2019-02-15T16:58:27Z")

</div>

Is there a way to calculate the shades of a color? I’d like to assign evenly spaced fill colors to an arbitrary and ever changing number of objects based on their size. Assign smaller objects darker shades and larger objects lighter shades between black and white.

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 15, 2019, 5:38pm UTC](https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426/2 "2019-02-15T17:38:15Z")

</div>

`colorMode( HSB )` is the simplest way. Spin around the hue for each object, put the saturation at or near max, and set the brightness based on size. It’s not perfect, though, as green completely dominates red and blue in brightness, but it’s an easy to use function if you want a wide variety of colors.

---

<div class="post-metadata">

**Author:** ![bobw](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@bobw](https://discourse.processing.org/u/bobw)\
**Post date:** [February 16, 2019, 7:07pm UTC](https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426/3 "2019-02-16T19:07:13Z")

</div>

Thanks, I appreciate the idea. I’ll see what I can do with the technique.

fyi, I’ve been experimenting with a method posted on stackoverflow:

[https://stackoverflow.com/questions/6615002/given-an-rgb-value-how-do-i-create-a-tint-or-shade](https://stackoverflow.com/questions/6615002/given-an-rgb-value-how-do-i-create-a-tint-or-shade)

---

<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:** [February 20, 2019, 7:34pm UTC](https://discourse.processing.org/t/how-to-calculate-the-shades-of-a-color/8426/4 "2019-02-20T19:34:04Z")

</div>

> [@bobw](#):
>
> evenly spaced fill colors

HSB is indeed the simple way of doing this, but if you want something that is very perceptually uniform, you might want to use **CIELAB** – which is not built-in, but can be converted into / out of.

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/6903/unexpected-result-in-color-conversion-from-lab-to-rgb)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

> [@Why doesn’t Processing support LAB?](https://discourse.processing.org/t/why-doesn-t-processing-support-lab/4848):
>
> As the title says. I’m not finding a reason why Processing does not support [the CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space).