RGBA Color Picker
Pick a color and copy its RGBA code, plus HEX, RGB, HSL and more.
How to use the RGBA color picker
- Pick or type your base color first, setting the red, green and blue just as you would in a normal RGB picker.
- Drag the alpha (opacity) slider down to make the color more see-through or up to make it solid, watching it against the background.
- Use the checkerboard preview to judge the transparency, since those squares show through wherever the color is not fully opaque.
- Copy the rgba() value and paste it straight into your CSS, or switch the readout to grab HEX with an alpha channel instead.
What is an RGBA color?
RGBA is plain RGB with one extra value on the end for opacity, written like rgba(30, 144, 255, 0.5). The red, green and blue channels set the color exactly as in RGB, and the alpha decides how much of the background shows through.
Why do you need an RGBA color picker?
An RGBA color picker is a tool for choosing a color and its transparency at the same time, then copying it as an rgba() code. With an RGBA color picker, you can set the red, green and blue, slide the opacity until the color sits exactly right over its background, and grab a value that drops straight into your CSS.
Meaning of each value in an RGBA color
Common alpha values
What RGBA is good for
- Image and hero overlays, where a semi-transparent dark layer keeps white text readable over a photo.
- Modal backdrops and scrims that dim the page behind a popup without hiding it completely.
- Soft hover and selected states, using a faint tint of a color over a button or row.
- Drop shadows and glows, which rely on a color fading smoothly to transparent.
RGBA vs RGB and HEX
RGB and a six-digit HEX code can only describe solid colors, so the moment you need something see-through you reach for RGBA (or an eight-digit HEX with an alpha pair). The first three numbers are identical to RGB; RGBA simply tacks on the alpha. If you do not need transparency, the plain RGB color picker is all you need; when you do, this picker saves you from guessing the opacity by hand.
Where RGBA is used
RGBA is the format for anything see-through on the web: image overlays, drop shadows, hover states and modal backdrops. Drop the alpha and the color fades into whatever sits behind it rather than changing hue. To convert an existing solid color into RGBA, start from the RGB Color Picker or run a code through the Color Converter.
Why RGBA beats an eight-digit HEX
Both can carry opacity, but RGBA is far easier to live with. A value like rgba(0, 0, 0, 0.5) reads as black at half strength at a glance, while #00000080 forces mental math. For transparency that gets tweaked by hand, RGBA wins on plain readability.
Alpha, the opacity of the color, on a scale from 0 (transparent) to 1 (solid).
No. It only changes how much of the color you see; the red, green and blue stay the same.
Not exactly. It is black shown at half opacity, so the result depends on whatever sits behind it.
Add a two-character alpha to the end of a six-digit HEX, for example #1E90FF80 is roughly rgba(30, 144, 255, 0.5).