Loading…

How to use Color Opacity / RGBA

Pick a color, drag the opacity slider, preview it over the checkerboard, and copy the rgba() or 8-digit hex value.

Frequently asked questions

What is the alpha value in rgba()?

Alpha is the opacity, from 0 (fully transparent) to 1 (fully opaque). rgba(0,0,0,0.5) is 50% black.

How does 8-digit hex encode opacity?

The last two hex digits are the alpha byte, so #FF000080 is red at about 50% opacity.

Why preview over a checkerboard?

The checkerboard shows through the transparent areas so you can judge the true opacity of the color.

More Color Tools

Image Color Extractor
Upload an image to extract its dominant color palette
Color Blindness Simulator
Simulate how your palette looks with different color blindness
Color Name Finder
Find the nearest CSS named color for any hex value
CSS Color Names Reference
Complete table of all 148 CSS named colors with hex values
Tailwind Color Finder
Browse and copy the complete Tailwind CSS color palette
Color Distance Calculator
Measure perceptual color difference using the ΔECIEDE2000 metric
Color Temperature Tool
Visualize warm/cool color temperature and generate palettes
HEX to RGBA Converter
Convert HEX colors to rgba() with custom alpha / opacity
Color Palette Sorter
Sort a list of hex colors by hue, saturation, or lightness
UI Color Scheme Builder
Build a complete UI color scheme with semantic role assignment
Contrast Grid Checker
Check WCAG contrast for every foreground/background pair in a palette at once
OKLCH Color Converter
Convert HEX/RGB to and from OKLCH and OKLab (CSS Color 4)

← View all Color ToolsBrowse all 1,100+ tools →