Sass color.is-legacy()

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.is-legacy detecting rgb hsl hwb legacy color spaces
Definition

Definition and Usage

color.is-legacy() returns a boolean: true when $color is in a legacy color space (rgb, hsl, or hwb), otherwise false. Load it with @use "sass:color" on Dart Sass 1.79+. There is no separate global alias.

Hex codes and CSS named colors count as legacy rgb. Modern writings such as oklch(), lab(), and color(srgb …) are not legacy.

Official samples.

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

Why it matters.

Historical Sass color behaviors (flexible adjust / change, default $space rules) treat legacy colors specially. Use this helper when auditing tokens or branching shared mixins during an oklch migration.

Version gate.

Needs Dart Sass 1.79+. Older compilers report Undefined function.

Syntax

Syntax

SCSS
@use "sass:color";

// Dart Sass 1.79+
color.is-legacy(#b37399);                      // true
color.is-legacy(hsl(90deg 30% 90%));           // true
color.is-legacy(oklch(70% 10% 120deg));        // false

// Module only — no separate global is-legacy()

Pattern: inspect a token → branch with if() or emit a debug flag while migrating palettes.

Reference

Which Spaces Are Legacy?

Official Sass color docs treat these three as the legacy trio:

Space / writingis-legacy?
rgb — hex, rgb(), named colorstrue
hsl — hsl(…)true
hwb — hwb(…)true
oklch / lab / display-p3 …false
color(srgb …) (modern srgb)false — not legacy rgb

Pair with color.space() to read the space name, or color.to-space() to convert.

Code

SCSS Examples

Examples target Dart Sass 1.79+. Booleans are interpolated into custom properties so you can open View Compiled CSS. @debug lines print to the compiler terminal / log.

Example 1 — Official True / False Trio

Hex and HSL are legacy; oklch is not (official docs samples).

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

How It Works

  1. Hex lives in legacy rgb → true.
  2. HSL literal is already legacy hsl → true.
  3. oklch is a modern space → false.
  4. Interpolation writes the booleans into CSS custom properties.

Example 2 — Named Colors and HWB

CSS color names and HWB also count as legacy.

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

How It Works

  1. Named colors map to legacy rgb.
  2. rgb() is the same legacy space.
  3. hwb() is the third legacy space.
  4. All three flags compile to true.

Example 3 — Modern Spaces Return False

Lab-family and wide-gamut spaces are not legacy.

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

How It Works

  1. These colors keep their modern spaces.
  2. Flags are all false.
  3. When adjusting them, prefer an explicit $space.
  4. Use color.channel() / color.adjust() with care.

Example 4 — Guard a Shared Mixin

Branch behavior when a token might be hex or oklch.

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

How It Works

  1. if() runs at compile time.
  2. Hex takes the legacy branch.
  3. oklch takes the modern branch.
  4. Real mixins might choose different adjust / $space shapes instead of labels.

Example 5 — Legacy rgb vs Modern srgb

Similar-looking colors, different legacy flags.

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

How It Works

  1. Legacy rgb returns true.
  2. Modern srgb via color() returns false.
  3. They can look similar but are different spaces in Sass.
  4. Writing color(srgb …) opts into the modern model.

Edge Cases & Pitfalls

Most is-legacy bugs are confusing modern srgb with legacy rgb, or calling it on an old Dart Sass.

version

Needs Dart Sass 1.79+

Undefined function means upgrade. LibSass / Ruby Sass do not provide this API.

srgb

srgb ≠ legacy rgb

color(srgb …) is modern. Only the classic rgb / hex / named path is legacy.

module

No global alias

Always call color.is-legacy() after @use "sass:color" (or import members with as *).

compile

Boolean is compile-time

CSS never sees a color.is-legacy() call — only the resolved true / false (or a branched result).

Toolchain

Sass Support

This is about Sass compilers, not browsers. The boolean is resolved at compile time.

FeatureStatus
color.is-legacy()Dart Sass 1.79+
Related color.space() / color.to-space()Dart Sass 1.79+ color-spaces work
Global is-legacy()None — module only
LibSass / Ruby SassNot supported

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Legacy = rgb / hsl / hwb (hex & named colors included).
  • Modern spaces return false — oklch, lab, color(srgb …), …
  • Dart Sass 1.79+ module API only — no global alias.
  • Use for audits & mixin guards while migrating palettes.

One line: color.is-legacy answers whether a color still lives in the old rgb/hsl/hwb trio.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color" (Dart Sass 1.79+)
2. Inspect $color’s space
3. Return true for rgb / hsl / hwb (incl. hex & names)
4. Return false for modern spaces
5. CSS sees only the boolean or the branched result

Frequently Asked Questions

color.is-legacy($color) returns true if the color is in a legacy color space (rgb, hsl, or hwb), and false otherwise. Example: color.is-legacy(#b37399) is true; color.is-legacy(oklch(70% 10% 120deg)) is false.
Official Sass color docs treat rgb, hsl, and hwb as legacy. Hex colors and CSS color names are part of the rgb legacy space.
color.is-legacy() needs Dart Sass 1.79+. Older compilers report Undefined function.
No. The modern srgb space is not the same as legacy rgb, even though they describe similar colors. is-legacy() returns false for color(srgb ...).
Many historical Sass color behaviors (flexible channel mixing on adjust/change, default $space rules) apply specially to legacy colors. Knowing which tokens are legacy helps when migrating to oklch and friends.
No. Use the module form color.is-legacy() after @use "sass:color".

Next: Sass color.is-missing()

Check whether a named channel is missing (none) on a color.

color.is-missing() →

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.invert Function Sass color.is-missing Function