Sass color.space()

Definition and Usage

color.space($color) returns the name of $color’s color space as an unquoted string — for example rgb, hsl, oklch, or xyz. Load it with @use "sass:color" on Dart Sass 1.79+. There is no separate global alias.

Hex codes and CSS named colors report as rgb. Use this helper to audit tokens, branch mixins, or decide when to call color.to-space().

Syntax

@use "sass:color";

// Dart Sass 1.79+
color.space(#036);                              // rgb
color.space(hsl(120deg 40% 50%));               // hsl
color.space(color(xyz-d65 0.1 0.2 0.3));        // xyz

// Module only — no separate global space()

Pattern: inspect a token → compare the unquoted name in if() → convert with to-space when needed.

space vs is-legacy

Two related probes:

Related Functions

Load with @use "sass:color". Previous: color.scale(). Next: color.to-gamut(). Convert: color.to-space(). Legacy check: color.is-legacy(). Equality: color.same().

SCSS Examples

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

@use "sass:color";

@debug color.space(#036); // rgb

.swatch {
  --space: #{color.space(#036)};
}

.swatch {
  --space: rgb;
}

@use "sass:color";

@debug color.space(hsl(120deg 40% 50%)); // hsl

.leaf {
  --space: #{color.space(hsl(120deg 40% 50%))};
}

.leaf {
  --space: hsl;
}

@use "sass:color";

@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz

.cie {
  --space: #{color.space(color(xyz-d65 0.1 0.2 0.3))};
}

.cie {
  --space: xyz;
}

@use "sass:color";

.modern {
  --oklch: #{color.space(oklch(70% 10% 120deg))};
  --lab: #{color.space(lab(50% -20 30))};
}

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

@use "sass:color";

$brand: #036;
$accent: oklch(70% 0.12 250deg);

.report {
  --brand: #{color.space($brand)};
  --brand-oklch: #{if(color.space($brand) == oklch, "ready", "convert")};
  --accent: #{if(color.space($accent) == oklch, "ready", "convert")};
}

.report {
  --brand: rgb;
  --brand-oklch: convert;
  --accent: ready;
}

Sass Support

color.space() is a modern module helper. Prefer Dart Sass 1.79+ with @use "sass:color".

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. Require Dart Sass 1.79+
2. @use "sass:color"
3. Read color.space($c) as an unquoted name
4. Compare with == rgb / == oklch (unquoted)
5. Convert with color.to-space() when the space is wrong