Transparencies
The use of transparent colors is common in web design.
Transparencies are easy to achieve in modern CSS using two recommended techniques that leverage existing ACSS color tokens.
Method 1: Color Mix
You can mix any color with transparent using CSS' color-mix()
function.
.foo {
background: color-mix(in srgb, var(--primary) 27%, transparent);
}
Here's a breakdown:
in srgb
=> the color space you want to mix in (for transparencies it's mostly irrelevant).var(--primary)
=> the color or shade you want to make transparent.27%
=> the amount of the color you want (the remainder will be transparent).transparent
=> the CSS color key for transparency.
Color Mix has greater browser support than Relative Color Syntax and is typically easier to write.
Method 2: Relative Color Syntax
Relative Color Syntax allows you to access the color partials of any color natively with full support for transparency manipulation.
.foo {
background: oklch(from var(--primary) l c h / .27);
}
Here's a breakdown:
oklch()
=> the color space you want to work in.from var(--primary)
=> the color or shade you want to make transparent.l c h
=> the color partials (can be referenced as shown, converted to a value, or manipulated withcalc()
)..27
=> the resulting opacity.
Relative Color Syntax gives you the added flexibility of manipulating the color partials if desired.
Why No Transparency Tokens?
We had a big library of pre-made transparency tokens in previous versions of ACSS. There were pros and cons to this approach:
Pros:
- Handy and quick.
Cons:
- Lots of CSS declarations that were never used means a lot of bloat.
- Values were often close, but not perfect, since they were in fixed increments.
- Users often needed to create custom transparencies anyway to best match their design requirements, resulting in a [mostly unused] library of static values and a handful of custom transparencies.
As you can see, the cons greatly outweighed the pros. Transparencies tend to be customized to the context, so it's best to just stick with:
- Generating transparencies on the fly with color-mix() or relative color syntax.
- Creating custom transparency tokens based on project requirements.
Remember, you can still create easily referenceable transparency tokens yourself:
:root {
--primary-trans-77: color-mix(in srgb, var(--primary 77%, transparent);
}
The benefit of this approach is that you only create what you need and actually use with 100% accuracy. And they're still easily referenceable, but with no bloat!