CSS Color Opacity Calculator

Calculate the optimal opacity to blend a color onto a specific background to match a target color. Perfect for Tailwind CSS v4.

CSS File Content (Optional)

Background Color

Base Color

Target Color

How to use

1.Paste your optional Tailwind v4 CSS configuration with custom colors.
2.Enter your background color in hex format (e.g., #ffffff).
3.Enter the base and target color names (e.g., "gray-900" and "gray-700").
4.Click Calculate to get the optimal opacity modifier.

Supports both custom oklch colors and native Tailwind hex colors.