Sass color.is-powerless() Function

What You’ll Learn

color.is-powerless() belongs to the built-in sass:color module. It answers: is this channel powerless—would changing it leave the color looking the same? This page covers the official hsl / hwb / lch / oklch rules, optional $space, how it differs from is-missing, the Dart Sass 1.79+ requirement, and five examples.

What Is color.is-powerless()?

Powerless means “this dial is connected, but turning it does nothing right now.” Classic case: a grey in HSL still stores a hue angle, but with saturation: 0% that hue cannot change the look. Official docs return whether $channel is powerless in $space.

• color.is-powerless(hsl(180deg 0% 40%), "hue") → true
• color.is-powerless(hsl(180deg 0% 40%), "saturation") → false
• color.is-powerless(#999, "hue", $space: hsl) → true

📝 Syntax

Load the color module, then pass a color, a quoted channel, and an optional space:

@use "sass:color";

// Dart Sass 1.79+
color.is-powerless($color, $channel, $space: null)

Parameters

Return value

📦 Loading sass:color

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

// Recommended — namespaced (Dart Sass 1.79+)
@use "sass:color";
$p: color.is-powerless(hsl(180deg 0% 40%), "hue");

// Optional — bring members into the current namespace
@use "sass:color" as *;
$p: is-powerless(hsl(180deg 0% 40%), "hue");

// Optional — custom namespace
@use "sass:color" as c;
$p: c.is-powerless(hsl(180deg 0% 40%), "hue");

🎨 When Is a Channel Powerless?

Official docs list these circumstances:

📋 is-powerless vs is-missing

Both are boolean channel checks, 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.is-powerless() call.

Examples Gallery

Examples target Dart Sass 1.79+. Open View Compiled CSS to see the booleans Sass emits.

@use "sass:color";

@debug color.is-powerless(hsl(180deg 0% 40%), "hue");        // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation"); // false

.flags {
  --hue: #{color.is-powerless(hsl(180deg 0% 40%), "hue")};
  --sat: #{color.is-powerless(hsl(180deg 0% 40%), "saturation")};
}

.flags {
  --hue: true;
  --sat: false;
}

@use "sass:color";

@debug color.is-powerless(#999, "hue", $space: hsl); // true

.hex {
  --hue-hsl: #{color.is-powerless(#999, "hue", $space: hsl)};
  --hue-pink: #{color.is-powerless(#b37399, "hue", $space: hsl)};
}

.hex {
  --hue-hsl: true;
  --hue-pink: false;
}

@use "sass:color";

.oklch {
  --grey-hue: #{color.is-powerless(oklch(50% 0% 120deg), "hue")};
  --vivid-hue: #{color.is-powerless(oklch(50% 0.15 120deg), "hue")};
}

.oklch {
  --grey-hue: true;
  --vivid-hue: false;
}

@use "sass:color";

@mixin accent-note($c) {
  &::after {
    content: if(
      color.is-powerless($c, "hue", $space: hsl),
      "skip-hue",
      "use-hue"
    );
  }
}

.chip-grey {
  @include accent-note(#999);
}

.chip-pink {
  @include accent-note(#b37399);
}

.chip-grey::after {
  content: "skip-hue";
}

.chip-pink::after {
  content: "use-hue";
}

@use "sass:color";

$grey-hsl: hsl(180deg 0% 40%);
$grey-lch: color.to-space(grey, lch);

.report {
  --powerless-hue: #{color.is-powerless($grey-hsl, "hue")};
  --missing-hue: #{color.is-missing($grey-lch, "hue")};
}

.report {
  --powerless-hue: true;
  --missing-hue: true;
}

🚀 Real-World Use Cases

• Accent mixins — skip hue rotates / complements on greys.
• Palette audits — flag tokens where hue is stored but meaningless.
• Design-system guards — refuse hue-based variants when sat/chroma is 0.
• Space migrations — check hex greys with $space: hsl or oklch.
• Teaching color models — show why greys still print a hue angle.

⚠️ Common Pitfalls

• Old Dart Sass — color.is-powerless needs 1.79+.
• Unquoted channel names — use "hue", not bare hue.
• Checking hex without $space — hex is rgb; pass $space: hsl (or oklch) to test hue powerlessness.
• Confusing with missing — powerless ≠ absent; use both helpers when needed.
• Rotating hue on greys — the math may run, but the visual result stays grey.

💡 Best Practices