🎨
Opacity Calculator
opacity calculator
Opacity Calculator
Preview colors at different opacity levels and get the blended hex value
100%
Blended result on #FFFFFF
#3B82F6
rgb(59, 130, 246)
Opacity Scale
100%
#3B82F6
90%
#4F8FF7
80%
#629BF8
70%
#76A8F9
60%
#89B4FA
50%
#9DC1FB
40%
#B1CDFB
30%
#C4DAFC
20%
#D8E6FD
10%
#EBF3FE
How to use
- 1
Choose foreground and background colors.
- 2
Adjust the opacity.
- 3
See the blended hex value.
FAQ
Is this tool free?
Yes — no sign-up, no installation, completely free to use right away.
What is this tool?
This tool is a handy color helper for developers — matching colors to the nearest Tailwind class or working out opacity values. It saves you guesswork while styling. Everything runs in your browser.