Sass color.is-powerless()

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.is-powerless detecting powerless hue on grey colors
Definition

Definition and Usage

color.is-powerless() returns a boolean: true when a named channel is powerless in a space — changing it would not change how the color looks. Classic case: hue on a grey (HSL saturation 0%). Load it with @use "sass:color" on Dart Sass 1.79+. There is no separate global alias.

Pass a quoted channel name ("hue") and an optional unquoted $space (hsl, oklch, …). Defaults to $color’s own space.

Official samples.

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

Powerless vs missing.

Powerless means the dial may still have a value, but turning it does nothing. Missing means the channel is absent (none). Use color.is-missing() for absence.

Version gate.

Needs Dart Sass 1.79+. Older compilers report Undefined function.

Syntax

Syntax

SCSS
@use "sass:color";

// Dart Sass 1.79+
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

// Module only — no separate global is-powerless()

Pattern: before hue rotates / complements, check whether hue is powerless so greys skip accent math.

Reference

When Is a Channel Powerless?

Official docs list these circumstances (mainly hue):

SpacePowerless channelCondition
hslhuesaturation is 0%
hwbhuewhiteness + blackness > 100%
lch / oklchhuechroma is 0%
HelperQuestion
color.is-powerless()Would changing this channel change the look?
color.is-missing()Is this channel absent (none)?
Code

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.

Example 1 — HSL Grey: Hue Powerless, Saturation Not

Zero saturation makes hue powerless (official docs sample).

SCSS
@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")};
}

How It Works

  1. Saturation is 0% — any hue looks the same grey.
  2. Hue is powerless → true.
  3. Saturation still matters (it can bring colorfulness back) → false.
  4. Greys are the teaching hero for this helper.

Example 2 — Hex Grey Checked in HSL Space

Pass $space: hsl so a hex is evaluated with HSL powerless rules.

SCSS
@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)};
}

How It Works

  1. $space: hsl converts the hex for the check.
  2. #999 is a grey → hue powerless.
  3. #b37399 has saturation → hue still matters.
  4. Space name is unquoted; channel name is quoted.

Example 3 — Oklch: Hue Powerless When Chroma Is 0%

Same idea in a modern polar space.

SCSS
@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")};
}

How It Works

  1. Official rule: in oklch / lch, hue is powerless when chroma is 0%.
  2. Zero chroma → true.
  3. Add chroma and hue becomes meaningful again.
  4. Same grey story as HSL, modern space spelling.

Example 4 — Guard Hue Rotations

Skip complement-style logic when hue is powerless.

SCSS
@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);
}

How It Works

  1. if() runs at compile time.
  2. Grey tokens take the skip branch.
  3. Chromatic tokens keep hue-based accents.
  4. Real mixins might call color.complement() only on the use-hue path.

Example 5 — Powerless vs Missing Side by Side

Same grey story, two different boolean helpers.

SCSS
@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")};
}

How It Works

  1. In HSL the grey still has a hue value, but it is powerless.
  2. After grey → LCH, hue may be missing instead.
  3. Both flags warn you not to treat hue as a useful accent dial.
  4. Pick the helper that matches your question (power vs absence).

Edge Cases & Pitfalls

Most is-powerless bugs are mixing it up with is-missing, or forgetting quotes / space spelling.

quotes

Channel quoted, space unquoted

Use "hue" for the channel and $space: hsl (not a string) for the space.

vs missing

Powerless ≠ missing

A grey can store a hue that is powerless. After conversion, that hue may become missing. Different helpers.

version

Needs Dart Sass 1.79+

Undefined function means upgrade. LibSass / Ruby Sass do not provide this API.

hex

Pass $space for hex greys

Hex lives in rgb. Check hue powerless rules with $space: hsl or oklch.

Toolchain

Sass Support

This is about Sass compilers, not browsers. The boolean is resolved at compile time.

FeatureStatus
color.is-powerless() / $spaceDart Sass 1.79+
Related color.is-missing()Dart Sass 1.79+
Global is-powerless()None — module only
LibSass / Ruby SassNot supported

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Powerless = turning the dial does nothing (e.g. hue on a grey).
  • HSL sat 0% / LCH chroma 0% / HWB W+B > 100% make hue powerless.
  • Quote the channel; optional unquoted $space.
  • Different from is-missing — Dart Sass 1.79+, module only.

One line: color.is-powerless tells you when a channel cannot change the look — guard hue accents on greys.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color" (Dart Sass 1.79+)
2. Resolve $color in $space (or its own space)
3. Inspect the quoted $channel
4. Return true if that channel is powerless
5. CSS sees only the boolean or the branched result

Frequently Asked Questions

color.is-powerless($color, $channel, $space: null) returns true if that channel is powerless in the chosen space—changing it would not change how the color looks. Example: color.is-powerless(hsl(180deg 0% 40%), "hue") is true.
Official docs: in hsl when saturation is 0%; in hwb when whiteness + blackness is greater than 100%; in lch/oklch when chroma is 0%.
Missing means the channel is absent (for example CSS none). Powerless means the channel may still have a value, but it does not affect appearance—like hue on a grey.
color.is-powerless() and its $space argument need Dart Sass 1.79+. Older compilers report Undefined function.
Pass a quoted channel string such as "hue". Pass an unquoted space name such as hsl or oklch for $space.
No. Use the module form color.is-powerless() after @use "sass:color".

Next: Sass color.mix()

Blend two colors with an optional weight and color space / method.

color.mix() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.is-missing Function Sass color.mix Function