Sass color.is-legacy() Function

What You’ll Learn

color.is-legacy() belongs to the built-in sass:color module. It answers one boolean question: is this color in a legacy color space? This page covers which spaces count as legacy, why that matters for other color helpers, the Dart Sass 1.79+ requirement, and five examples.

What Is color.is-legacy()?

is-legacy means “tell me if this color still lives in the old CSS/Sass trio.” Official docs: it returns whether $color is in a legacy color space. That boolean helps when you mix classic hex tokens with modern oklch designs.

• color.is-legacy(#b37399) → true
• color.is-legacy(hsl(90deg 30% 90%)) → true
• color.is-legacy(oklch(70% 10% 120deg)) → false

📝 Syntax

Load the color module, then pass one color:

@use "sass:color";

// Dart Sass 1.79+
color.is-legacy($color)

Parameters

Return value

📦 Loading sass:color

There is no separate global is-legacy() built-in. Use the module form on Dart Sass 1.79+.

// Recommended — namespaced (Dart Sass 1.79+)
@use "sass:color";
$ok: color.is-legacy(#b37399);

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

// Optional — custom namespace
@use "sass:color" as c;
$ok: c.is-legacy(#b37399);

🎨 Which Spaces Are Legacy?

Official Sass color documentation treats these three as the legacy spaces. Hex and CSS color names count as rgb.

💡 Why Legacy Matters

Legacy colors keep special historical behavior in helpers like color.adjust(), color.change(), and color.complement()—for example flexible channel mixing across rgb/hsl/hwb and optional $space defaults. Modern colors usually require explicit spaces and stricter channel rules.

🛠 Compatibility

This is about Sass compilers, not browsers. The boolean is resolved at compile time—CSS never sees a color.is-legacy() call.

Examples Gallery

Examples target Dart Sass 1.79+. Open View Compiled CSS to see the booleans Sass emits into custom properties or content.

@use "sass:color";

@debug color.is-legacy(#b37399); // true
@debug color.is-legacy(hsl(90deg 30% 90%)); // true
@debug color.is-legacy(oklch(70% 10% 120deg)); // false

.flags {
  --hex: #{color.is-legacy(#b37399)};
  --hsl: #{color.is-legacy(hsl(90deg 30% 90%))};
  --oklch: #{color.is-legacy(oklch(70% 10% 120deg))};
}

.flags {
  --hex: true;
  --hsl: true;
  --oklch: false;
}

@use "sass:color";

.named {
  --purple: #{color.is-legacy(rebeccapurple)};
  --hwb: #{color.is-legacy(hwb(270 20% 40%))};
  --rgb-fn: #{color.is-legacy(rgb(102, 51, 153))};
}

.named {
  --purple: true;
  --hwb: true;
  --rgb-fn: true;
}

@use "sass:color";

.modern {
  --oklch: #{color.is-legacy(oklch(70% 10% 120deg))};
  --lab: #{color.is-legacy(lab(50% 20 30))};
  --p3: #{color.is-legacy(color(display-p3 0.7 0.2 0.3))};
}

.modern {
  --oklch: false;
  --lab: false;
  --p3: false;
}

@use "sass:color";

@mixin accent-label($c) {
  &::after {
    // Compile-time branch — CSS only keeps the chosen string
    content: if(color.is-legacy($c), "legacy-token", "modern-token");
  }
}

.chip-hex {
  @include accent-label(#336699);
}

.chip-oklch {
  @include accent-label(oklch(60% 0.12 250deg));
}

.chip-hex::after {
  content: "legacy-token";
}

.chip-oklch::after {
  content: "modern-token";
}

@use "sass:color";

.trap {
  // Legacy rgb (0–255 style / hex family)
  --legacy-rgb: #{color.is-legacy(rgb(102, 51, 153))};

  // Modern srgb (0–1 style via color())
  --modern-srgb: #{color.is-legacy(color(srgb 0.4 0.2 0.6))};
}

.trap {
  --legacy-rgb: true;
  --modern-srgb: false;
}

🚀 Real-World Use Cases

• Design-system migration — inventory which tokens are still legacy hex/HSL.
• Shared mixins — choose legacy-friendly defaults vs explicit $space.
• CI / debug dumps — emit boolean flags while auditing a palette file.
• Docs & teaching — show rgb/hsl/hwb vs oklch with a one-line test.
• Safe refactors — refuse certain channel ops unless the color is legacy (or vice versa).

⚠️ Common Pitfalls

• Old Dart Sass — color.is-legacy needs 1.79+.
• Confusing rgb with srgb — modern color(srgb …) is not legacy.
• Expecting a color back — this helper returns a boolean, not a converted color.
• Assuming “legacy” means deprecated CSS — hex/HSL are still normal; “legacy” is Sass’s space category.
• Looking for a global alias — use color.is-legacy() from the module.

💡 Best Practices