loading words...

Feb 20, 2019 23:59:00

Chroma alpha

by @swizecteller | 202 words | 🐣 | 116💌

Swizec Teller

Current day streak: 0🐣
Total posts: 116💌
Total words: 32303 (129 pages 📄)

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?

#200wordsTIL 👇

---

Chroma-js, if you don't know, is the best javascript color manipulation library. Not only can you tweak colors to your heart's content, Chroma makes sure it looks good.

I've written about it before 

https://swizec.com/blog/make-things-pretty-chroma-js/swizec/8233

---

The basics go something like this:

chroma(ANY_COLOR_IDENTIFIER)

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.

chroma("#ddbb33").alpha(0.5)

Ne

contact: email - twitter / Terms / Privacy