Colors
Generador de superposiciones de color
Used by developers, writers, and creators worldwide.
A color overlay generator turns a solid color and an opacity into a ready-to-use semi-transparent overlay, expressed both as an 8-digit hex with an alpha channel and as a CSS rgba value. Overlays are how designers darken a hero photo so white headline text stays readable, add a brand-colored wash over imagery, or build scrim layers behind modals and drawers. Pick your overlay color and dial the opacity, and it computes the alpha byte for the hex form and the matching decimal alpha for rgba, returning both alongside the solid color and the opacity for reference. Developers and designers use it to drop overlays into CSS backgrounds, gradients, and image filters without hand-calculating alpha values. Each value is paste-ready: use the rgba form in older codebases or the compact 8-digit hex where supported. Adjust opacity until text over the image clears a comfortable contrast.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Paste your overlay color.
- Set the opacity from 0 to 100.
- Click Generate to get hex8 and rgba forms.
- Drop either value into your CSS background.
Use Cases
- •Darkening a hero image so text stays readable
- •Adding a brand-colored wash over photography
- •Building a scrim behind a modal or drawer
- •Creating a semi-transparent card or banner layer
- •Generating alpha values for CSS backgrounds
Tips
- →Raise opacity until overlay text reaches AA contrast.
- →Use a dark overlay to make white text readable.
- →Layer a brand color overlay for a tinted wash.
- →Use hex8 in modern CSS and rgba for wider support.
FAQ
what is an 8-digit hex
It is a standard hex color with two extra digits for the alpha channel, like #0f172a8c. The last byte sets opacity from 00 fully transparent to ff fully opaque, and most modern browsers support it.
should i use hex8 or rgba
They are equivalent. The 8-digit hex is compact and convenient in modern CSS, while rgba is more widely understood and slightly safer in older codebases or tooling. Both are provided so you can pick either.
how do i keep overlay text readable
Increase the overlay opacity until the text over the image reaches a comfortable contrast, generally aiming for WCAG AA against the darkest or lightest area of the photo the text crosses.
You might also like
Popular tools from other categories that share themes with this one.