What is the RGBA Color Generator?
Generate RGBA colour values with opacity control. Pick your colour and alpha level, then copy the rgba() string ready for CSS.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the RGBA Color Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Pick your base colour
Enter a HEX value or use the colour picker. The RGB components are calculated automatically.
Set the alpha value
Drag the opacity slider from 0 (fully transparent) to 1 (fully opaque). Common values: 0.1 for subtle tints, 0.5 for overlays, 0.9 for near-solid.
Copy the rgba() string
Click Copy to grab the complete rgba(r, g, b, a) value. Paste it directly as a colour value in any CSS property.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Overlays */
.overlay-dark { background: rgba(0, 0, 0, 0.5); }
.overlay-light { background: rgba(255, 255, 255, 0.15); }
/* Tinted surfaces */
.card-tinted { background: rgba(108, 46, 245, 0.08); }
.border-subtle { border-color: rgba(108, 46, 245, 0.2); }
/* Shadow with colour */
.card {
box-shadow: 0 8px 32px rgba(108, 46, 245, 0.18);
}Use RGBA for overlays, tinted surfaces, and coloured shadows - anywhere you need a colour at partial opacity.
Pro tips for better results
Use CSS custom properties to avoid repeating RGBA strings
Define --color-primary-rgb: 108, 46, 245 as raw RGB components, then use rgba(var(--color-primary-rgb), 0.1) to create tints at any opacity without redefining the colour.
rgba() and opacity are different
Setting opacity: 0.5 on an element makes the entire element (including children) semi-transparent. rgba() on background-color keeps children fully opaque. Use rgba() for tinted backgrounds.
Modern CSS supports rgb() with a slash for alpha
rgb(108 46 245 / 0.5) is equivalent to rgba(108, 46, 245, 0.5) in modern browsers (Chrome 65+, Firefox 52+, Safari 12.1+). Both forms work.
RGBA shadows add depth without hard edges
box-shadow: 0 4px 16px rgba(0,0,0,0.12) looks more natural than a solid-colour shadow. Keep alpha values between 0.06 and 0.2 for realistic depth.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.