Sass color.whiteness()

Definition and Usage

color.whiteness($color) returns the HWB whiteness of a legacy color as a number between 0% and 100%. Global alias: whiteness($color). Available since Dart Sass 1.28+.

Official Sass docs mark it deprecated — prefer color.channel($color, "whiteness", $space: hwb) on Dart Sass 1.79+. Pair with color.blackness() when auditing a full HWB mix.

Syntax

@use "sass:color";

// Deprecated reader (Dart Sass 1.28+)
color.whiteness(#e1d7d2); // 82.3529411765%
color.whiteness(white);   // 100%
color.whiteness(black);   // 0%

// Prefer today (Dart Sass 1.79+)
color.channel(#e1d7d2, "whiteness", $space: hwb);

Pattern: recognize color.whiteness in old files → rewrite with color.channel($c, "whiteness", $space: hwb).

Migrate to color.channel

Side-by-side mapping:

To change whiteness, use writers like color.scale($c, $whiteness: …, $space: hwb) or color.adjust($c, $whiteness: …, $space: hwb) — not the reader.

Related Functions

Prefer color.channel(). Sibling reader: color.blackness(). Change with color.scale() or color.adjust(). Previous: color.to-space(). Next: adjust-hue(). Load via @use "sass:color".

SCSS Examples

Examples use color.whiteness(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted).

@use "sass:color";

@debug color.whiteness(#e1d7d2); // 82.3529411765%

.swatch {
  --whiteness: #{color.whiteness(#e1d7d2)};
}

.swatch {
  --whiteness: 82.3529411765%;
}

@use "sass:color";

@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

.extremes {
  --white: #{color.whiteness(white)};
  --black: #{color.whiteness(black)};
}

.extremes {
  --white: 100%;
  --black: 0%;
}

@use "sass:color";

.hwb-pair {
  --w: #{color.whiteness(#e1d7d2)};
  --b: #{color.blackness(#e1d7d2)};
  --channel: #{color.channel(#e1d7d2, "whiteness", $space: hwb)};
}

.hwb-pair {
  --w: 82.3529411765%;
  --b: 11.7647058824%;
  --channel: 82.3529411765%;
}

@use "sass:color";

.compare {
  --soft: #{color.whiteness(#e1d7d2)};
  --mid: #{color.whiteness(#6b717f)};
  --deep: #{color.whiteness(#036)};
  --brand: #{color.whiteness(#336699)};
}

.compare {
  --soft: 82.3529411765%;
  --mid: 41.9607843137%;
  --deep: 0%;
  --brand: 20%;
}

@use "sass:color" as *;

.panel {
  --whiteness: #{whiteness(#e1d7d2)};
}

.panel {
  --whiteness: 82.3529411765%;
}

Sass Support

color.whiteness() is a deprecated module reader. Prefer color.channel on modern Dart Sass.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.whiteness() / whiteness()
2. Replace with color.channel($c, "whiteness", $space: hwb)
3. Keep Dart Sass 1.28+ only if you cannot upgrade yet
4. Pair with blackness when auditing HWB mixes
5. Use scale / adjust (not the reader) to change whiteness