Sass opacify() Function

What You’ll Learn

opacify() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color more opaque by increasing alpha by $amount at compile time. This page covers the fixed-amount trap, the fade-in alias, why the module system skipped it, how it differs from color.scale(), migration to color.adjust(), and five compiled examples.

What Is opacify()?

Opacify means “make this color less see-through.” Official docs: it increases the alpha channel of $color by $amount (0–1). RGB (or HSL) stays the same; only transparency moves toward solid by a fixed chunk.

• opacify(rgba(#6b717f, 0.5), 0.2) → rgba(107, 113, 127, 0.7)
• fade-in(rgba(#e1d7d2, 0.5), 0.4) → rgba(225, 215, 210, 0.9)
• opacify(rgba(#036, 0.7), 0.3) → #036 (fully opaque)

📝 Syntax

Call the global function (or its alias) with a legacy color and an alpha step:

// Deprecated globals (legacy colors only) — aliases
opacify($color, $amount)
fade-in($color, $amount)

// Preferred — relative opacity
@use "sass:color";
color.scale($color, $alpha: $percent)

// Same fixed math as opacify
color.adjust($color, $alpha: $amount)

Parameters

Return value

📦 Why There Is No color.opacify()

Official docs: because opacify() is usually not the best way to make a color more opaque, it is not included in the new module system. You will not find color.opacify or color.fade-in after @use "sass:color".

// Old (deprecated globals — same result)
$fill: opacify(rgba(#6b717f, 0.5), 0.2);
$fill: fade-in(rgba(#6b717f, 0.5), 0.2);

@use "sass:color";

// Same fixed addition as opacify
$fill: color.adjust(rgba(#6b717f, 0.5), $alpha: 0.2);

// Usually better — 20% more opaque relative to the original
$fill: color.scale(rgba(#6b717f, 0.5), $alpha: 20%);

📋 opacify vs color.scale vs color.adjust

Official docs call out this trap with rgba(#036, 0.7) (already mostly opaque):

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished color—no opacify() call remains at runtime.

Examples Gallery

Examples use deprecated global opacify() / fade-in() plus modern scale / adjust migrations. Open View Compiled CSS for verified output (matches official Sass docs samples).

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)

.overlay {
  background: rgba(#6b717f, 0.5);
  &.strong {
    background: opacify(rgba(#6b717f, 0.5), 0.2);
  }
}

.overlay {
  background: rgba(107, 113, 127, 0.5);
}
.overlay.strong {
  background: rgba(107, 113, 127, 0.7);
}

@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)

.card {
  --wash: #{rgba(#e1d7d2, 0.5)};
  --solidish: #{fade-in(rgba(#e1d7d2, 0.5), 0.4)};
}

.card {
  --wash: rgba(225, 215, 210, 0.5);
  --solidish: rgba(225, 215, 210, 0.9);
}

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
// opaque color.
@debug opacify(rgba(#036, 0.7), 0.3); // #036

.deep {
  color: opacify(rgba(#036, 0.7), 0.3);
}

.deep {
  color: #003366;
}

@use "sass:color";

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)

.deep {
  --opacify: #{opacify(rgba(#036, 0.7), 0.3)};
  --scale: #{color.scale(rgba(#036, 0.7), $alpha: 30%)};
}

.deep {
  --opacify: #003366;
  --scale: rgba(0, 51, 102, 0.79);
}

@use "sass:color";

.tokens {
  --legacy: #{opacify(rgba(#6b717f, 0.5), 0.2)};
  --adjust: #{color.adjust(rgba(#6b717f, 0.5), $alpha: 0.2)};
  --brand: #{opacify(rgba(#336699, 0.2), 0.3)};
}

.tokens {
  --legacy: rgba(107, 113, 127, 0.7);
  --adjust: rgba(107, 113, 127, 0.7);
  --brand: rgba(51, 102, 153, 0.5);
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize opacify() / fade-in() in older overlays.
• Safe migrations — swap to color.adjust for identical output, or scale for better UX.
• Teaching alpha — show fixed alpha steps vs relative scaling.
• Audit traps — find opacify on already-opaque washes that snap to solid.
• Pairing with transparentize — both globals are deprecated twins; migrate together.

⚠️ Common Pitfalls

• Using it in new code — prefer color.scale (or adjust for same math).
• Expecting color.opacify() — that name does not exist in sass:color.
• High alpha + large amounts — easy to clamp to fully opaque unexpectedly.
• Modern color spaces — $color must be legacy for global opacify.
• Confusing with color.opacity() — that helper reads alpha; opacify writes a new color.

💡 Best Practices