Sass color.space() Function

What You’ll Learn

color.space() belongs to the built-in sass:color module. It answers: which color space is this color in? This page covers the unquoted string return value, hex / hsl / xyz / oklch examples, how it pairs with is-legacy, the Dart Sass 1.79+ requirement, and five examples.

What Is color.space()?

Space means “tell me the coordinate system this color lives in.” Official docs: returns the name of $color’s space as an unquoted string. A hex brand reports rgb; an HSL literal reports hsl; an XYZ color reports xyz.

• color.space(#036) → rgb
• color.space(hsl(120deg 40% 50%)) → hsl
• color.space(color(xyz-d65 0.1 0.2 0.3)) → xyz

📝 Syntax

Load the color module, then pass one color:

@use "sass:color";

// Dart Sass 1.79+
color.space($color)

Parameters

Return value

📦 Loading sass:color

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

// Recommended — namespaced (Dart Sass 1.79+)
@use "sass:color";
$name: color.space(#036);

// Optional — bring members into the current namespace
@use "sass:color" as *;
$name: space(#036);

// Optional — custom namespace
@use "sass:color" as c;
$name: c.space(#036);

🎨 Common Space Names You Will See

Official samples cover rgb, hsl, and xyz. In real projects you will also meet modern names like oklch and srgb.

📋 space vs is-legacy

Both inspect a color’s space, but they answer different questions.

🛠 Compatibility

This is about Sass compilers, not browsers. The space name is resolved at compile time—CSS never sees a color.space() call (unless you interpolate the string into a custom property).

Examples Gallery

Examples target Dart Sass 1.79+. Open View Compiled CSS to see the space names Sass emits (official docs results where noted).

@use "sass:color";

@debug color.space(#036); // rgb
@debug color.space(hsl(120deg 40% 50%)); // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz

.report {
  --hex: #{color.space(#036)};
  --hsl: #{color.space(hsl(120deg 40% 50%))};
  --xyz: #{color.space(color(xyz-d65 0.1 0.2 0.3))};
}

.report {
  --hex: rgb;
  --hsl: hsl;
  --xyz: xyz;
}

@use "sass:color";

.tokens {
  --navy: #{color.space(navy)};
  --oklch: #{color.space(oklch(70% 0.1 120deg))};
  --hwb: #{color.space(hwb(120deg 20% 30%))};
}

.tokens {
  --navy: rgb;
  --oklch: oklch;
  --hwb: hwb;
}

@use "sass:color";

$hex: #336699;
$modern: color(srgb 0.2 0.4 0.6);

.compare {
  --legacy-rgb: #{color.space($hex)};
  --modern-srgb: #{color.space($modern)};
  --legacy-flag: #{color.is-legacy($hex)};
  --srgb-legacy: #{color.is-legacy($modern)};
}

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

@use "sass:color";

@mixin space-note($c) {
  &::after {
    content: if(
      color.space($c) == rgb,
      "legacy-rgb",
      "other-space"
    );
  }
}

.chip-hex {
  @include space-note(#036);
}

.chip-oklch {
  @include space-note(oklch(70% 0.1 120deg));
}

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

.chip-oklch::after {
  content: "other-space";
}

@use "sass:color";

$brand: #036;
$brand-oklch: color.to-space($brand, oklch);

.migrate {
  --before: #{color.space($brand)};
  --after: #{color.space($brand-oklch)};
  --same-paint: #{color.same($brand, $brand-oklch)};
}

.migrate {
  --before: rgb;
  --after: oklch;
  --same-paint: true;
}

🚀 Real-World Use Cases

• Token audits — log which spaces your design tokens currently use.
• Mixin branching — choose rgb-safe vs oklch-aware color math.
• Migration checks — confirm to-space actually changed the space name.
• Debugging — emit --space custom properties in local builds.
• Docs / teaching — show hex is rgb, not a separate space.
• Pair with is-legacy — name for detail, boolean for quick gates.

⚠️ Common Pitfalls

• Expecting a “hex” space — hex reports rgb.
• Confusing rgb with srgb — modern color(srgb …) is not legacy rgb.
• Calling on older Dart Sass — needs 1.79+; expect Undefined function earlier.
• Looking for a global space() — there is none; use the module form.
• Using only space when you need a boolean — prefer is-legacy for yes/no legacy checks.

💡 Best Practices