Hex Colors with Opacity in CSS, Sass, and Tailwind

Plain hex colors are solid and opaque. When you need the same hex color at different opacity levels — for a button hover state, a modal backdrop, or a tinted background — you need either rgba() in CSS, a Sass color function, or a Tailwind opacity modifier.

Each approach has its own syntax. Here is how to handle hex-with-opacity in each environment, starting with the converter to get your RGB values.

Plain CSS: rgba() and Custom Properties

The standard approach in plain CSS: convert your hex to RGB first, then use rgba():

/* Hex: #3B82F6 = rgb(59, 130, 246) */
.overlay {
  background-color: rgba(59, 130, 246, 0.5);
}

A more maintainable pattern stores the RGB channels as a CSS custom property:

:root {
  --brand-rgb: 59, 130, 246;
}
.overlay {
  background-color: rgba(var(--brand-rgb), 0.5);
}
.button {
  background-color: rgba(var(--brand-rgb), 1);
}

This way you update the color in one place and use different opacities anywhere in your stylesheet.

Sass: Using rgba() Directly on Hex Variables

Sass extends the CSS rgba() function to accept a full hex color as the first argument — no manual RGB extraction needed:

$brand-color: #3B82F6;

.overlay {
  background-color: rgba($brand-color, 0.5);
}
.button:hover {
  background-color: rgba($brand-color, 0.8);
}

Sass computes the RGB values at compile time and outputs the rgba() string. This works in both classic Sass (.scss) and the modern module system (@use). You do not need to know the RGB values — Sass handles the conversion internally.

Sell Custom Apparel — We Handle Printing & Free Shipping

Tailwind CSS: Opacity Modifiers

Tailwind 3.x introduced the slash opacity syntax. Add a slash followed by a number (0 to 100) to any color utility:

For custom hex colors not in the Tailwind palette, add them to your tailwind.config.js and Tailwind automatically generates the opacity variants:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3B82F6',
      }
    }
  }
}
// Usage: bg-brand/50

CSS color-mix(): The Modern Alternative

The newer color-mix() function can blend any color with transparent:

.overlay {
  background-color: color-mix(in srgb, #3B82F6 50%, transparent);
}

This works without converting to RGB first. Browser support is strong as of 2024 (Chrome 111+, Firefox 113+, Safari 16.2+), but rgba() remains the safer choice for projects requiring broader compatibility. Use color-mix() when you know your target audience uses modern browsers.

Frequently Asked Questions

Can I use hex codes with opacity directly in CSS without converting to RGB?

In modern CSS you can use the eight-character hex format (#3B82F680) or color-mix(). For older browser support, converting to rgba() with the RGB values from the converter is the reliable standard approach.

What is the CSS custom property pattern for hex with opacity?

Store the color as separate R, G, B channel values: --brand: 59, 130, 246. Then use them in rgba(): rgba(var(--brand), 0.5). This lets you change the color in one place and use it at any opacity anywhere in the stylesheet.

Does Tailwind support custom hex colors with the slash opacity syntax?

Yes. Add your custom hex color to the theme in tailwind.config.js and Tailwind generates opacity variants automatically. The slash syntax (bg-brand/50) works the same as built-in colors.

Which approach is best for a design system with many brand colors?

CSS custom properties with separate channel variables (--color-brand-rgb: 59, 130, 246) is the most flexible. It lets any part of the system use any opacity level without duplicating color values.