I wonder how we can calculate the saturation of a color — Some thoughts on automating semantic color design for UIs.
I've been looking around and can't find it.
What I imagine is that we can make something that detects where the nearest color is in a color square, and the closer it is to the top-right corner, the more it's saturated. But then telling it to be more saturated, it could go to white, two black corners, or gray. It's not very straightforward, it seems.
Black saturates to white, though.
NPM library
I found a library that can probably do a lot of heavylifting for a CSS comparator.
https://www.npmjs.com/package/@lost-types/colorista
I may test more with this when I'm free.
Apparently, it's not straightforward to define "colorful"?
I don't know if I'm missing something. I probably am since they're talking about computer graphics and not pure color theory.
Wikipedia says something similar:
HSL (hue, saturation, lightness) and HSV (hue, saturation, value, also known as HSB or hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes.
What I want to do
I'm not very sure what I want to do, but it's something like this:
The designer inputs pure, fully-saturated colors into a file, and they're "raw" tones, like "that's the hue of purple we'll be using". And then, they add a level of saturation, so "we'll be using this color at that saturation". Then, we could desaturate the background and saturate buttons and other accent elements and use a pure hue palette.
This would enrich a UI semantically.
However, it's very hard for a designer to grab a color they like, run to the editor, then saturate it to the top, and then save it, and then give some arbitrary level of saturation. There are no tools for this.
The alternative is to simply input the color, and it gets saved with the hue level and saturation level, and it automatically generates different degrees of brightness and saturation, and assigns them to tags such as accent300, accent400, etc.
Then if you want to make a button, you can just go "purple-accent-700", and if you want to make an element that is light, but is not accented, you can go with "purple-background-700" (where 700 is the brightness, and accent/background are semantic annotations of saturation).
