Sass color.ie-hex-str() Function

What You’ll Learn

color.ie-hex-str() belongs to the built-in sass:color module. It formats a color as an unquoted #AARRGGBB string for legacy Internet Explorer -ms-filter values—at compile time. This page covers the alpha-first layout, how opacity maps into AA, when (not) to use it, and five compiled examples.

What Is color.ie-hex-str()?

ie-hex-str means “turn this Sass color into the weird hex string old IE filters expected.” Official docs: it returns an unquoted string in #AARRGGBB form for Internet Explorer’s -ms-filter property.

• color.ie-hex-str(#b37399) → #FFB37399
• color.ie-hex-str(rgba(242, 236, 228, 0.6)) → #99F2ECE4
• color.ie-hex-str(#abc) → #FFAABBCC

📝 Syntax

Load the color module, then pass one color:

@use "sass:color";

color.ie-hex-str($color)
// Global alias:
// ie-hex-str($color)

Parameters

Return value

📦 Loading sass:color

Prefer the module API. Official docs also document the global name ie-hex-str() for older stylesheets.

// Recommended — namespaced
@use "sass:color";
$ie: color.ie-hex-str(#b37399);

// Optional — bring members into the current namespace
@use "sass:color" as *;
$ie: ie-hex-str(#b37399);

// Optional — custom namespace
@use "sass:color" as c;
$ie: c.ie-hex-str(#b37399);

// Legacy global name
$ie: ie-hex-str(#b37399);

🎨 Reading #AARRGGBB

Break the string into four byte pairs. Alpha comes first—that is the whole point of this helper.

🛠 RGB Conversion & Gamut Mapping

Official docs note: if $color is not already in the rgb space, Sass converts it to rgb and gamut-maps if necessary. The gamut-mapping algorithm may change in future Sass versions; docs currently mention local-minde.

@use "sass:color";

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
// Modern color spaces also convert to rgb for the IE string (newer Dart Sass):
// @debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287

🎯 Modern CSS Instead

For new UI, skip IE filter strings. Use standard CSS that every current browser understands.

// Modern — no ie-hex-str needed
.hero {
  background: linear-gradient(#336699, #4caf50);
}

// Legacy IE-only pattern (maintenance only)
// filter: progid:DXImageTransform.Microsoft.gradient(...);

🛠 Compatibility

This is about Sass compilers, not modern browser color APIs. The string is meant for obsolete IE filter CSS, not for today’s color properties.

Examples Gallery

Each example uses @use "sass:color". These patterns are for legacy IE maintenance only. Open View Compiled CSS to see the #AARRGGBB strings.

@use "sass:color";

@debug color.ie-hex-str(#b37399); // #FFB37399

.legacy {
  /* Not a modern CSS color property — string for IE filter tooling */
  --ie-start: #{color.ie-hex-str(#b37399)};
}

.legacy {
  --ie-start: #FFB37399;
}

@use "sass:color";

@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

.alpha-samples {
  --sixty: #{color.ie-hex-str(rgba(242, 236, 228, 0.6))};
  --half-green: #{color.ie-hex-str(rgba(0, 255, 0, 0.5))};
  --eighty-blue: #{color.ie-hex-str(rgba(51, 102, 153, 0.8))};
}

.alpha-samples {
  --sixty: #99F2ECE4;
  --half-green: #8000FF00;
  --eighty-blue: #CC336699;
}

@use "sass:color";

$start: #336699;
$end: #4caf50;

.hero-legacy {
  /* Obsolete IE filter — prefer linear-gradient() in modern CSS */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#{color.ie-hex-str($start)}',
    endColorstr='#{color.ie-hex-str($end)}',
    GradientType=0
  );
}

.hero-legacy {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF336699", endColorstr="#FF4CAF50", GradientType=0);
}

@use "sass:color";

$brand: #336699;
$brand-soft: rgba(51, 102, 153, 0.8);

.ie-tokens {
  --brand-ie: #{color.ie-hex-str($brand)};
  --brand-soft-ie: #{color.ie-hex-str($brand-soft)};
  --short-ie: #{color.ie-hex-str(#abc)};
}

.ie-tokens {
  --brand-ie: #FF336699;
  --brand-soft-ie: #CC336699;
  --short-ie: #FFAABBCC;
}

@use "sass:color";

.names {
  --module: #{color.ie-hex-str(#6b717f)};
  --global: #{ie-hex-str(#6b717f)};
}

.names {
  --module: #FF6B717F;
  --global: #FF6B717F;
}

🚀 Real-World Use Cases

• Legacy IE gradients — progid:DXImageTransform.Microsoft.gradient color stops.
• Old -ms-filter sheets — maintain color args without hand-writing #AARRGGBB.
• Migration audits — find IE filter strings while replacing them with modern CSS.
• Brand token bridges — keep one Sass color, emit IE strings only where still required.
• Teaching alpha-first hex — show why IE strings look “backwards” vs #RRGGBBAA.

⚠️ Common Pitfalls

• Using it as a normal color — #AARRGGBB is for IE filters, not modern color: values.
• Confusing with #RRGGBBAA — alpha is first here, not last.
• Building new features on -ms-filter — that API is obsolete; use standard CSS.
• Forgetting it returns a string — you often need #{} interpolation inside larger declarations.
• Expecting browsers to “understand” IE strings — modern engines ignore proprietary filter progids.

💡 Best Practices