Alex Rivera | Logout

Changing hue and lightness in Lab, Hcl or any perceptually uniform color system

Asked 2013-02-14T16:36:50.183
10

Changing hue, saturation and lightness in HSL color space if very easy. See this javascript implementation for example.

It is also easy to generate color schemes like: analogous, monochromatic, triad, tetrad, etc. See this javascript implementation.

The problem is that the HSL color system is not perceptually uniform.
And actually that's a real problem.

If you don't know what I am talking about, it's ok. Read about it: here and here. (these two articles are really short but very valuable, you really should read them).

The solution is using a color space that is perceptually uniform, like: CieLab, CieLuv, or Hcl.

The problem is that these color spaces also have colors that are out of the gamut(colors that cannot be displayed).

For working with different color spaces in javascript check out chroma.js or chromatist.

After this little introduction here is my actual problem:

I want to generate perceptually uniform color schemes(analogous, triad, tetrad, complementary, etc.). As I mentioned in Hsl it is simple: for example to generate a triad scheme I just rotate the HUE with 120 then with 240 and I have a triad scheme.

Well, in CieLab, Hcl or CieLuv it is not that simple. In Hcl (Hue, Chroma, Lightness) if I rotate Hue with 120 grades without changing chroma and lightness it is possible that the generated color will be not displayable (will be outside of RGB space).

Let's summarize the question:

How can I generate color schemes in a

Edit
Report

1 Answer

6

Finally I solved this problem based on HUSL (Human Friendly HSL) color space. This color space isn't perfectly perceptually uniform, but it's very close to it.

You can learn more about it here:

http://boronine.com/husl/

answered 2013-03-06T10:18:10.800

Your Answer