Applying opacity to an existing colour value is a pretty common design requirement, and here Chris presents five ways to achieve it.
I’ll admit that the explosion of colour models is one aspect of CSS that leaves me dizzy, so this explanation framed around a practical requirement really helps. The main approaches presented by Chris are:
- 8 digit hex code
- relative colour syntax (currently only supported in Safari)
- using a format other than hex such as HSL since it’s easier to apply transparency
- using (in a progressively enanced approach) HDR-display-friendly colours, via a new colour format such as
oklch