Opacity
Opacity Calculator
Calculate the resulting color when applying opacity and find equivalent solid colors
Color Settings
Preview
With Opacity
=
Equivalent Solid Color
#9DC1FB
CSS
1/* Color with 50% opacity */2background-color: #3b82f67f;3/* or */4background-color: rgba(59, 130, 246, 0.5);56/* Equivalent solid color on #ffffff */7background-color: #9dc1fb;
Tailwind CSS
1/* Tailwind CSS */2bg-blue-500/5034/* Or with arbitrary value */5bg-[#3b82f6]/50
Opacity Scale
Quick Pick Colors
How It Works
When you apply opacity to a color, it blends with the background color. This tool calculates the equivalent solid color that would appear the same without using opacity.
// Formula
result = foreground × opacity + background × (1 - opacity)