Sass color.same()

Definition and Usage

color.same($color1, $color2) returns a boolean: true when the two colors visually render as the same color. Unlike ==, space differences do not matter when the values match in the xyz color space. Load it with @use "sass:color" on Dart Sass 1.79+. There is no separate global alias.

Official docs also note that missing channels are treated as equivalent to zero.

Syntax

@use "sass:color";

// Dart Sass 1.79+
color.same(#036, #036);                              // true
color.same(#036, #037);                              // false
color.same(#036, color.to-space(#036, oklch));       // true
color.same(hsl(none 50% 50%), hsl(0deg 50% 50%));    // true

// Module only — no separate global same()

Pattern: after converting tokens with color.to-space(), compare them with color.same instead of ==.

color.same vs ==

Side-by-side mapping:

Related Functions

Load with @use "sass:color". Convert: color.to-space(). Previous: color.mix(). Next: color.scale(). Related probes: color.is-missing() / color.is-powerless() / color.space().

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.

@use "sass:color";

@debug color.same(#036, #036); // true

.match {
  --same: #{color.same(#036, #036)};
}

.match {
  --same: true;
}

@use "sass:color";

@debug color.same(#036, #037); // false

.diff {
  --same: #{color.same(#036, #037)};
}

.diff {
  --same: false;
}

@use "sass:color";

@debug color.same(#036, color.to-space(#036, oklch)); // true

.cross {
  --same: #{color.same(#036, color.to-space(#036, oklch))};
}

.cross {
  --same: true;
}

@use "sass:color";

@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true

.missing {
  --same: #{color.same(hsl(none 50% 50%), hsl(0deg 50% 50%))};
}

.missing {
  --same: true;
}

@use "sass:color";

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

.report {
  --match: #{if(color.same($brand, $converted), "ok", "drift")};
  --vs-alt: #{if(color.same($brand, #037), "ok", "drift")};
}

.report {
  --match: ok;
  --vs-alt: drift;
}

Sass Support

color.same() 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. Prefer color.same($a, $b) over == for cross-space look
4. Remember missing channels count as zero
5. Pair with color.to-space() when migrating spaces