Reputation: 18273
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 perceptually uniform color system (like CieLab, Hcl, CieLuv, or any other perceptually uniform color space)?
I want to implement this in javascript, but basically I want to find the method, so the question is language independent.
I hope we can find a clever way together :)
Upvotes: 10
Views: 2136
Reputation: 18273
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:
Upvotes: 6