Color Alpha Anywhere

In a previous article, "Different Degrees of Custom Property Usage," I discussed a scenario involving colors and CSS custom properties where I overdid the separation of HSL color values. Completely splitting each color into its H, S, and L components might be excessive.

However, a more practical approach involves this separation:

<code>html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}</code>

This uses two custom properties per color. Why? Because this provides a simple method for color application and allows for easy alpha transparency adjustments.

<code>.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1-hsl) / 0.5);
}</code>

There isn't a straightforward way in standard CSS to add alpha to an existing color. Although, a future CSS feature offers a potential solution:

<code>/* Future CSS! (currently works in Safari Technology Preview) */
.card-with-alpha {
  background: hsl(from var(--color-1) h s l / 0.5);
}</code>

This is elegant, but its production readiness remains uncertain.

Similarly, Houdini paint worklets, while promising (Dave Rupert's work is particularly noteworthy!), lack broad browser support (no Firefox or Safari support yet). They offer a compelling solution by using Canvas APIs to generate images with alpha, effectively enabling alpha transparency for any color format. This works in Chrome. The code and a video demonstration are available on Dave's GitHub and blog.

For production-ready solutions requiring this functionality, the initial custom properties method is the most reliable approach.

The above is the detailed content of Color Alpha Anywhere. For more information, please follow other related articles on the PHP Chinese website!