Color Transparency Generator
Give it one colour and it lays out the full alpha ladder, from fully opaque down to invisible. Click any step to copy the RGBA value.
About this tool
The grid runs through twelve alpha steps — 100 down to 10 in tens, then 5 and 0. Each swatch sits on a checkerboard so you can judge how much of the colour is actually left at that opacity, rather than guessing from the number.
Values are emitted as CSS rgba(), which works everywhere with no build step and no colour library. Clicking a swatch copies it.
Everything runs in your browser — nothing you enter here is sent to a server or stored. Provided as is, without warranty.
Using alpha instead of inventing new colours
Interfaces need a lot of near-invisible colour: hairline borders, hover backgrounds on list rows, the tint behind a selected item, scrims over images, focus rings, disabled states. The tempting route is to eyedrop each of those into a new named colour. Do that for a few months and you end up with thirty greys that nobody can tell apart and no way to know which is which.
Deriving them with alpha instead keeps the system small. One brand colour at 8% gives you a tinted row background. The same colour at 16% gives you its hover state. Your foreground colour at 10% gives you a border that sits correctly on any surface. Because they are all the same hue, they stay related automatically, and changing the base colour updates everything at once.
The caveat is that alpha only behaves this way when it composites over something predictable. A semi-transparent border looks right over your page background and quite different over a card, a modal or an image. It compounds too: an element at 20% opacity nested inside a parent at 50% is effectively at 10%. And a translucent text colour is a real accessibility hazard, because the contrast you measured against one background is not the contrast the user gets against another. For body text, resolve the colour to a solid hex and check it in the WCAG contrast checker. Keep alpha for surfaces, borders and overlays where the exact result matters less.
One more practical note: dark themes need different alpha values to light ones, not the same values inverted. A white overlay at 8% on near-black reads much stronger than a black overlay at 8% on white, because the eye is more sensitive to light on dark. If you are building both themes, generate the ladder twice — once from your light foreground and once from your dark one — and expect the numbers to differ. Pair this with the colour palette generator to get the base hues in the first place.
Ready to see where agents can take cost out of your business?
Tell us about the process you want to optimise. Vlad personally reviews every brief and replies within one business day.