Opacity
How transparent or opaque a color is — controlled by the alpha channel, ranging from fully transparent (0%) to fully opaque (100%).
What it means
Opacity (or its inverse, transparency) is the fourth dimension of color after hue, saturation, and lightness. In CSS and design tools, it's expressed as an alpha value: `rgba(0, 0, 0, 0.5)` is black at 50% opacity. In OKLCH, you can append alpha: `oklch(0.5 0.2 240 / 0.8)` is 80% opaque.
When a semi-transparent color is placed over another, the result is a visual blend determined by both colors and the alpha value. This is how overlays, scrims, shadows, and layered surfaces work — they don't use a separate mixed color, they stack transparent layers.
Why it matters in palette design
Opacity is how design systems create depth without multiplying color tokens. A single brand blue at different opacity levels can serve as a hover state (10%), a selected background (15%), a border (30%), or a full button (100%). PerfectPalette's shadow system uses neutral oklch values at low opacity rather than separate shadow color tokens.
Common confusion
Opacity vs. lightness: Reducing opacity makes a color more transparent (the background shows through). Increasing lightness makes a color brighter (approaches white). A dark blue at 30% opacity over white looks similar to a light blue at 100% opacity, but they behave differently when the background changes.
Example
A modal scrim uses `bg-black/50` (black at 50% opacity) to dim the page behind it. The content underneath is still visible but receded. If you used a solid gray instead, it would look flat and block all context. Opacity creates the sense of layering.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.