Sass color.hue()

Definition and Usage

color.hue($color) returns the HSL hue of a legacy color as a number between 0deg and 360deg. Global alias: hue($color).

Official Sass docs mark it deprecated — prefer color.channel($color, "hue") on Dart Sass 1.79+. Pair with color.saturation() and color.lightness() when auditing a full HSL triple.

Syntax

@use "sass:color";

// Deprecated reader
color.hue(#e1d7d2); // 20deg
color.hue(#f2ece4); // 34.2857142857deg
color.hue(#dadbdf); // 228deg

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

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

Migrate to color.channel

Side-by-side mapping:

To rotate hue, use writers like color.adjust($c, $hue: …, $space: hsl) or the deprecated adjust-hue() — not the reader. For opposite hue, see color.complement().

Related Functions

Prefer color.channel(). Sibling readers: color.saturation() / color.lightness(). Rotate with color.adjust() or adjust-hue(). Previous: color.green(). Next: lighten(). Load via @use "sass:color".

SCSS Examples

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

@use "sass:color";

@debug color.hue(#e1d7d2); // 20deg

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

.swatch {
  --hue: 20deg;
}

@use "sass:color";

@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg

.palette {
  --cream: #{color.hue(#f2ece4)};
  --cool: #{color.hue(#dadbdf)};
}

.palette {
  --cream: 34.2857142857deg;
  --cool: 228deg;
}

@use "sass:color";

.wheel {
  --red: #{color.hue(red)};
  --lime: #{color.hue(lime)};
  --blue: #{color.hue(blue)};
}

.wheel {
  --red: 0deg;
  --lime: 120deg;
  --blue: 240deg;
}

@use "sass:color";

.card {
  --from-hsl: #{color.hue(hsl(200deg, 50%, 40%))};
  --brand: #{color.hue(#336699)};
}

.card {
  --from-hsl: 200deg;
  --brand: 210deg;
}

@use "sass:color" as *;

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

.panel {
  --hue: 20deg;
}

Sass Support

color.hue() remains for compatibility. New readers should use color.channel on Dart Sass 1.79+.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.hue($c) / hue($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "hue")
4. Add $space: hsl when reading non-legacy colors
5. Use adjust / complement when you need to write hue