Learned about another cool feature of chroma-js – alpha channel manipulation. It's either the amazingest thing ever or I'm way dumber than I thought.
Imagine you have #ddbb33 how do you give it opacity?
I've written about it before
The basics go something like this:
and then you can play around. You can .darken, .lighten, or translate between RGB and HSL.
So colors and alpha channel.
You have #ddbb33 in a variable. A config let's say.
How do you give it a 50% opacity?
Right, the obvious answer: set opacity: .5 on the DOM element using your color.
Well what if you need DOM to be 100% opacity and the color to be slightly transparent.
Ah! #ddbb33 is an RGB color, you can write it as rgb(221, 187, 33)
To make it opacity: 50% you do rgba(221, 187, 33, .5)
What if #ddbb33 is a configurable variable. You'd need to translate between #ddbb33 and rgba(221 ... in your CSS or styled component.
Or you can use chroma and do this.