Opacity Calculator

Calculate the resulting color when applying opacity over different backgrounds

Calculate and preview colors with different opacity/transparency levels.

Base Color

rgb(33, 150, 243)

Opacity: 100%

0%25%50%75%100%

Quick presets:

Color with Opacity

HEX8

RGBA

HSLA

Blended Result

Preview

Background Color:#ffffff

Sample Text

Opacity: 100% — Alpha: 1.00

Accessibility (WCAG)

Contrast ratio of the blended color used as background, with the best text color.

6.72:1

Text: #000000 on #2196F3

✗ AAA

7:1

✓ AA

4.5:1

✓ AA Large

3:1

Opacity Scale

10%

15%

20%

25%

30%

40%

50%

60%

70%

75%

80%

85%

90%

95%

100%

Export

:root {
  --color-base: #2196f3;
  --color-5: rgba(33, 150, 243, 0.05);
  --color-10: rgba(33, 150, 243, 0.1);
  --color-15: rgba(33, 150, 243, 0.15);
  --color-20: rgba(33, 150, 243, 0.2);
  --color-25: rgba(33, 150, 243, 0.25);
  --color-30: rgba(33, 150, 243, 0.3);
  --color-40: rgba(33, 150, 243, 0.4);
  --color-50: rgba(33, 150, 243, 0.5);
  --color-60: rgba(33, 150, 243, 0.6);
  --color-70: rgba(33, 150, 243, 0.7);
  --color-75: rgba(33, 150, 243, 0.75);
  --color-80: rgba(33, 150, 243, 0.8);
  --color-85: rgba(33, 150, 243, 0.85);
  --color-90: rgba(33, 150, 243, 0.9);
  --color-95: rgba(33, 150, 243, 0.95);
  --color-100: rgb(33, 150, 243);
}

Reverse Calculator

Given a solid target color, a background, and a source color — find the opacity needed.

Target (solid)

Background

Source color

Required opacity

23%(alpha: 0.23)

≈

How it works

Opacity (alpha channel) controls color transparency, from 0 (invisible) to 1 (solid). It's fundamental in web design for creating layers, interactive states, and visual effects.

Composition formula

Result = Color × α + Background × (1 - α)

This formula is applied to each channel (R, G, B) independently. The result is a solid color that always depends on the background it's shown over.

Common uses

Overlays & modals: Dark background at 50-70% behind content
Shadows: Box-shadow with black at 15-25%
Hover states: White/black overlay at 5-10% for subtle elevation
Subtle borders: Borders at 10-20% that adapt to any background
Design tokens: Complete opacity scale as CSS variables

🔄 Reverse Calculator

The reverse calculator solves a common problem: your designer gives you a solid color (e.g., #D6E4FC) but you need to know what opacity to apply to your base color over the background to achieve it. Enter the 3 colors and the tool calculates the required alpha.

♿ Accessibility & opacity

The WCAG indicator shows if the resulting color (blended with background) has enough contrast for text. Low-opacity text on light backgrounds can fail WCAG AA. The tool calculates the best text color (white or black) and shows which levels pass.

✨ Modern CSS syntax

Modern CSS uses rgb(R G B / alpha) instead of rgba(R,G,B,alpha). The "CSS Modern" export generates variables with this syntax. In Tailwind, you can use bg-color/50 directly.

💡 Practical Use Cases

Case 1: Modal overlay

You need a semi-transparent dark background behind your modal.

→ rgba(0, 0, 0, 0.5) or rgb(0 0 0 / 50%)
→ Over white results in #808080

Case 2: Opacity token scale

Create a design token system with your primary color at different opacities.

→ Export as CSS/SCSS variables for your entire team
→ In Tailwind: define the base color and use bg-primary/20

Case 3: Adaptive subtle hover

White overlay at 5% works on dark backgrounds, black overlay at 5% on light backgrounds.

→ rgba(255,255,255,0.05) for dark theme
→ rgba(0,0,0,0.04) for light theme

Case 4: Recover opacity from a mockup

Your designer gives you a flat color #D6E4FC but you know it's blue over white.

→ Use the reverse calculator: target #D6E4FC, background #FFFFFF, source #2196F3
→ Result: 20% opacity → rgba(33,150,243,0.2)

⚡ Pro tip

Use the opacity scale as a "system" in your project: define the base color once and apply opacity via CSS variables. When you change the primary color, all variations update automatically.

Frequently Asked Questions

How do I convert an alpha color to solid?

You need to know the background color. Use the formula: Result = Color × alpha + Background × (1-alpha). This calculator does it automatically in the "Blended Result" field.

What opacity to use for overlays?

For dark overlays over images: 50-70%. For subtle hover backgrounds: 4-10%. For shadows: 15-25%. For subtle borders: 10-20%. The quick presets include the most common values.

What is the reverse calculator?

It solves the inverse problem: given a solid color you see on screen, a background, and the original color, it calculates what opacity was applied. Very useful when your designer gives you a flat color and you need to get the original RGBA.

What does the WCAG indicator mean?

It shows if the color with opacity blended on the background has enough contrast for readable text. AAA (7:1) is the strictest level, AA (4.5:1) is the standard, and AA Large (3:1) applies to large text (≥18px or ≥14px bold).

What's the difference between rgba() and modern syntax?

Modern syntax uses spaces without commas: rgb(33 150 243 / 50%) instead of rgba(33,150,243,0.5). Both are valid in modern browsers, but the new one is more consistent with the CSS Color Level 4 standard.

How do I use opacity in Tailwind CSS?

Define your base color in tailwind.config.js and use the /opacity syntax: bg-blue-500/50 applies blue at 50%. The Tailwind export from this tool generates the config and usage examples ready to copy.