Sass color.same() Function

What You’ll Learn

color.same() belongs to the built-in sass:color module. It answers: do these two colors look the same when painted? This page covers visual equality in xyz, how it differs from ==, missing channels treated as zero, the Dart Sass 1.79+ requirement, and five examples.

What Is color.same()?

Same means “these would paint identically,” not “these are written the same way in SCSS.” Official docs return whether $color1 and $color2 visually render as the same color. A hex brand and its color.to-space(..., oklch) twin can still be same.

• 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

📝 Syntax

Load the color module, then pass two colors:

@use "sass:color";

// Dart Sass 1.79+
color.same($color1, $color2)

Parameters

Return value

📦 Loading sass:color

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

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

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

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

🎨 How Visual Equality Works

Official docs: colors are equivalent when they represent the same color value in the xyz color space—even if they live in different spaces in your SCSS.

📋 color.same() vs ==

Both return booleans, but they answer different questions.

🛠 Compatibility

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

Examples Gallery

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

@use "sass:color";

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

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

.flags {
  --same-hex: true;
  --diff-hex: false;
}

@use "sass:color";

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

@debug color.same($brand, $brand-oklch); // true

.report {
  --cross-space: #{color.same($brand, $brand-oklch)};
}

.report {
  --cross-space: true;
}

@use "sass:color";

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

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

.missing {
  --hue-none-vs-zero: true;
}

@use "sass:color";

@mixin token-note($a, $b) {
  &::after {
    content: if(
      color.same($a, $b),
      "same",
      "different"
    );
  }
}

.pair-match {
  @include token-note(#036, #036);
}

.pair-diff {
  @include token-note(#036, #037);
}

.pair-match::after {
  content: "same";
}

.pair-diff::after {
  content: "different";
}

@use "sass:color";

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

.compare {
  // Visual equality across spaces
  --same: #{color.same($hex, $oklch)};

  // Strict Sass equality may disagree after to-space
  // Prefer color.same() when "looks the same" is the goal
  --still-same-paint: #{color.same($hex, $oklch)};
}

.compare {
  --same: true;
  --still-same-paint: true;
}

🚀 Real-World Use Cases

• Token dedupe — detect when two named tokens already paint identically.
• Space migrations — assert a hex brand matches its oklch twin after to-space.
• Mixin guards — skip redundant CSS custom properties.
• Missing-channel safety — treat none like zero for visual checks.
• Theme audits — flag “different” names that secretly share the same paint.
• Teaching color spaces — show representation vs appearance.

⚠️ Common Pitfalls

• Using only == after to-space — representation can differ while paint matches; prefer same for visual checks.
• Assuming near hexes match — #036 and #037 are different colors.
• Calling on older Dart Sass — needs 1.79+; expect Undefined function earlier.
• Looking for a global same() — there is none; use the module form.
• Forgetting missing ≡ zero — none can make same return true against a zero channel.

💡 Best Practices