Color Theory: Perceptually Uniform Gradients

john's Avatar

john

08 Apr, 2024 01:28 AM

I came across a nice tutorial on design which included an interesting section on color theory, and perceptually uniform color spaces:

https://programmingdesignsystems.com/color/perceptually-uniform-col...

I have attached a partial screenshot of the webpage showing two green-to-blue gradients. The first ghastly gradient is what happens if you simply interpolate from bright green to bright blue using standard RGB values. The second is what you would want instead, made possible through the use of perceptual color spaces.

I was curious to see if the new color nodes I added last Fall would allow me to replicate this page, so I made a quick test (see screenshot).

My test draws six gradients:

  • RGB. A pure RGB interpolation that matches the 1st gradient in the webpage
  • HSB. A gradient using HSB colors to vary hue, easily made with my Colors node
  • HSB Corrected. A gamma-corrected HSB gradient made with my Inter_Color node
  • LCH. The perceptual LCH color space using my Palette node
  • OKLAB. The perceptual OKLAB color space using my Palette node
  • OKLAB Corrected. The 2nd gradient in the webpage made using Palette and OKLAB with a corrected blue

I was pleased to find that I could recreate the second gradient using my existing Palette node. The gradient shown in the webpage cheats a little by changing the final blue color to make the overall effect more harmonious. When I did the same thing, my gradient matched theirs.

Both the LCH and OKLAB settings in my Palette node allow you to create perceptually uniform gradients (with subtle differences). The "Correct Lightness" checkbox - essentially a "gamma correction" - does not apply to those two color spaces because those spaces are already gamma corrected. I did discover, though, that if you choose the plain vanilla RGB color space and then check the "Correct lightness" option, the result is pretty good, almost as good as using OKLAB - and much better than HSL/HSB with lightness corrected as in my third gradient.

I don't currently offer gamma correction as a separate node, but maybe I should. Or maybe choosing "Gamma Correct" in my Inter_color node should switch to RGB-based interpolation. I will consider both options for the next release of my library.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • webpage_screenshot.png 519 KB
  • gradient_test_screenshot.png 523 KB
  • color_bands.ndbx.zip 368 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

16 May, 2024 02:11 AM
16 May, 2024 01:58 AM
14 May, 2024 01:29 AM
13 May, 2024 12:36 AM
12 May, 2024 07:46 PM

 

05 May, 2024 04:38 PM
03 May, 2024 06:50 AM
03 May, 2024 12:30 AM
03 May, 2024 12:09 AM
19 Apr, 2024 04:41 AM
16 Apr, 2024 06:18 PM