I wonder how we can calculate the saturation of a color — Some thoughts on automating semantic color design for UIs.

in GEMS3 years ago

image.png

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).

Sort:  


Congratulations @cryptosharon!
You raised your level and are now a Dolphin!

Check out the last post from @hivebuzz:

Hive Power Up Day - March 1st 2021 - Hive Power Delegation

Ooh this is very interesting to me

I was wondering where you went from Steemit. Seems you found a home on Hive :) How do you like it? I believe it used to sync with Steemit posts, but doesnt seem like it now

It didn't sync anything. It was copied from one to the other. Hive is a hardfork. Sorry for being so absent, found a new job, have been very busy.

ZERION Airdroping 400 HIVE

HIVE Staking Will Be Live Soon

Join zerion for early access and 400 HIVE Airdrop
HIve also enters to Defi one step into the future

For More Details and Airdrop click here