Sass color.ie-hex-str()

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.ie-hex-str converting colors to AARRGGBB for legacy IE filters
Definition

Definition and Usage

color.ie-hex-str() returns an unquoted #AARRGGBB string — the format Internet Explorer expected in -ms-filter / progid:DXImageTransform.Microsoft.gradient. Load it with @use "sass:color". The global alias is ie-hex-str().

Alpha comes first (not #RRGGBBAA). Opaque colors start with FF. If $color is not already RGB, Sass converts to RGB and gamut-maps if needed (currently local-minde).

Legacy maintenance only.

Do not use this helper for modern CSS color, background, or border-color. Prefer standard hex / rgba() / linear-gradient().

Official samples.

color.ie-hex-str(#b37399) → #FFB37399. rgba(242, 236, 228, 0.6) → #99F2ECE4. oklch(70% 10% 120deg) → #FF9BA287.

Returns a string.

Embed with interpolation #{color.ie-hex-str($c)} inside filter strings or custom properties used by legacy tooling.

Syntax

Syntax

SCSS
@use "sass:color";

color.ie-hex-str(#b37399);                      // #FFB37399
color.ie-hex-str(rgba(242, 236, 228, 0.6));     // #99F2ECE4
color.ie-hex-str(oklch(70% 10% 120deg));        // #FF9BA287

// Global alias
ie-hex-str(#b37399);

Pattern: keep brand colors normal → call ie-hex-str only where an old IE filter string still needs #AARRGGBB.

Reference

vs Modern CSS Colors

Same brand, different outputs:

NeedUse
Normal CSS colorHex / rgb() / rgba()
Modern gradientlinear-gradient($start, $end)
Legacy IE -ms-filter gradientcolor.ie-hex-str($c) inside startColorstr / endColorstr
Read alpha as a numbercolor.alpha() / color.channel(..., "alpha")
Code

SCSS Examples

Each example uses @use "sass:color" for legacy IE maintenance only. Open View Compiled CSS to see what Dart Sass emits.

Example 1 — Official Opaque Hex

Encode a solid color as #AARRGGBB (official docs sample).

SCSS
@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)};
}

How It Works

  1. Opaque colors get alpha byte FF.
  2. RGB bytes follow — B37399.
  3. Return value is a string, so #{} interpolates it.
  4. Matches the official sample #FFB37399.

Example 2 — Transparent Colors

Alpha becomes the leading byte pair (official 0.6 sample plus more).

SCSS
@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))};
}

How It Works

  1. 0.6 maps to alpha byte 99.
  2. 0.5 → 80; 0.8 → CC.
  3. RGB channels follow after the alpha pair.
  4. Not the modern #RRGGBBAA order.

Example 3 — Legacy IE Gradient Filter

The historical reason this helper exists — maintenance only.

SCSS
@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
  );
}

How It Works

  1. Sass inserts #FF336699 and #FF4CAF50.
  2. Proprietary filter string is for old IE only.
  3. Modern stylesheets should use linear-gradient($start, $end).
  4. Keep this pattern only while retiring legacy sheets.

Example 4 — Brand Tokens to IE Strings

Keep brand hexes once; derive IE filter strings when a legacy sheet still needs them.

SCSS
@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)};
}

How It Works

  1. One brand hex drives the opaque IE string.
  2. Soft brand keeps RGB with alpha byte CC.
  3. Shorthand #abc expands to full RGB with opaque alpha.
  4. DRY — no hand-maintained #AARRGGBB duplicates.

Example 5 — Module vs Global ie-hex-str()

Both names return the same unquoted IE string.

SCSS
@use "sass:color";

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

How It Works

  1. Module and global encodings match.
  2. Prefer color.ie-hex-str() so the module is obvious.
  3. Opaque gray gets leading FF.
  4. Interpolation writes the strings into custom properties.

Edge Cases & Pitfalls

Most ie-hex-str bugs are treating the string as a modern CSS color, or mixing alpha byte order.

modern

Not a CSS color value

Do not put #FFB37399 in color: / background: expecting modern browsers to parse IE’s format.

order

Alpha is first

#AARRGGBB, not #RRGGBBAA. Opaque → FF…; half opacity ≈ 80….

string

Interpolate the result

Use #{color.ie-hex-str($c)} inside filter strings. It is an unquoted string, not a color type.

new work

Skip it in new systems

Introduce ie-hex-str only while maintaining old IE sheets — never as a design-token format.

Toolchain

Sass Support

Module form needs Dart Sass. Prefer it when you must still emit IE filter strings.

FeatureStatus
@use "sass:color" / color.ie-hex-strDart Sass 1.23+
Global ie-hex-str()Older compilers / legacy SCSS
Non-RGB inputConverted to RGB (gamut-mapped if needed)
LibSass / Ruby SassNo modern module API

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • #AARRGGBB string for legacy IE -ms-filter only.
  • Alpha first — opaque starts with FF.
  • Load @use "sass:color" and prefer the module name.
  • Skip in new CSS — use hex / rgba / linear-gradient instead.

One line: color.ie-hex-str is a maintenance bridge for old IE filters — not a modern color format.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color"
2. Resolve $color (convert to RGB if needed)
3. Encode alpha as AA, then RR GG BB
4. Return an unquoted #AARRGGBB string
5. Interpolate into legacy -ms-filter strings only

Frequently Asked Questions

color.ie-hex-str($color) returns an unquoted #AARRGGBB string for Internet Explorer’s -ms-filter property. Example: color.ie-hex-str(#b37399) is #FFB37399.
IE’s filter format is #AARRGGBB, not the more common #RRGGBBAA. Opaque colors start with FF; rgba(242, 236, 228, 0.6) becomes #99F2ECE4.
No. It exists for legacy IE -ms-filter strings. Modern CSS should use standard gradients, colors, and filters instead.
Add @use "sass:color"; then call color.ie-hex-str($brand). Prefer the module form. The global alias is ie-hex-str().
Yes. Official docs say if $color is not already in rgb, Sass converts it to rgb and gamut-maps if needed before building the IE string.
The module form needs Dart Sass with @use (about 1.23+). LibSass/Ruby Sass may expose a global ie-hex-str() but lack the modern module API.

Next: Sass color.invert()

Return the inverse or negative of a color in a chosen space.

color.invert() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.grayscale Function Sass color.invert Function