ColorMe / CSS Color Level 4

Does this look weird?

.element {
  background: color(#eb8fa9 alpha(75%) blackness(20%));

That's the "color function" from a draft spec from the CSS working group. I think it's all about making colors a little easier and more intuitive to work with. Looks awesome to me, as someone who uses Sass color manipulation functions quite a bit.


The Power of the rgba() Color Function in CSS

One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.

But as the support of these CSS color functions is zero nowadays, we can temporarily use PostCSS and compile them as regular colors. Or we can experiment and discover the power of CSS rgba() color functions to change colors on the fly! Let's see how we can use it.


8-Digit Hex Codes?

Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and the DevTools seem to be defaulting to showing alpha transparent colors in this format even if you set it originally using something else.

Firefox supports it too, for the record.