gka / chroma.js

JavaScript library for all kinds of color manipulations
https://gka.github.io/chroma.js/
Other
10.19k stars 546 forks source link

consistent API for color.luminance, color.saturation, color.hue #210

Open Yzrsah opened 5 years ago

Yzrsah commented 5 years ago

color.luminance is great, but color.saturation is missing and we only have the mutating form of color.saturate / color.desaturate.

It would be great if there was a consistent API for color.luminance, color.saturation, color.hue providing a similar feature for all three.

gka commented 5 years ago

the reason that color.luminance exists is that there is a WCAG definition for it and there is no other way to directly change the brightness of a color to match a WCAG luminance.

in contrast, there are different ways you can easily set the saturation of a color to a certain value. But first you have to decide what definition of saturation you're preferring. You can use the color.set() helper method to modify a single channel directly:

chroma('red').set('hsl.s', 0.5);  // set HSL saturation to 50%
chroma('red').set('hsv.s', 0.5); // set HSV saturation to 50%
chroma('red').set('hsi.s', 0.5); // set HSI saturation to 50%
chroma('red').set('lch.c', 50); // set Lch "chromacity" to 50

Of course, since those are different definitions of saturation, each of the lines will return different colors.

image

You can do the same with hue:

image