PostCSS Relative Opacity

title="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">

[PostCSS] plugin to add opacity to any colors with [Relative Color Syntax].

Upcoming CSS Colors 5 allows to change any color including adding opacity.
But Firefox still [doesn’t support] this syntax. This tool partially polyfill
thi syntax via [color-mix()].

``css
.notice {
background: oklch(from var(--accent-color) l c h / 30%);
}
`

will be processed to:

`css
.notice {
background: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
`

---

  Made in Evil Martians, product consulting for developer tools.

---

[Relative Color Syntax]: https://www.w3.org/TR/css-color-5/#relative-color
[doesn’t support]: https://caniuse.com/css-relative-colors
[color-mix()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
[PostCSS]: https://github.com/postcss/postcss

Docs

Read full docs here.