Sass color.hue() Function

What You’ll Learn

color.hue() belongs to the built-in sass:color module (Deprecated Functions). It returns a legacy color’s HSL hue as a number from 0deg to 360deg at compile time. This page covers the color-wheel idea, siblings saturation / lightness, migration to color.channel(), and five compiled examples.

What Is color.hue()?

Hue is the angle on the HSL color wheel—where the color sits between red, yellow, green, cyan, blue, and magenta. Official docs: color.hue() returns that angle as a number between 0deg and 360deg. It only reads the value; it does not rotate the color.

• color.hue(#e1d7d2) → 20deg
• color.hue(#f2ece4) → 34.2857142857deg
• color.hue(#dadbdf) → 228deg

📝 Syntax

Load the color module, then pass a legacy color:

@use "sass:color";

// Deprecated — still works on legacy colors
color.hue($color)

// Optional — bring members into scope
@use "sass:color" as *;
hue($color)

// Recommended migration (Dart Sass 1.79+)
color.channel($color, "hue")

Parameters

Return value

📦 Loading sass:color & Migrating

Prefer the namespaced form. Bare hue() only works after @use "sass:color" as *;—otherwise CSS may keep the call as a plain string.

@use "sass:color";

// Old (deprecated, still available)
$h: color.hue(#e1d7d2); // 20deg

// New — preferred on Dart Sass 1.79+
$h: color.channel(#e1d7d2, "hue");

// Optional global-style import
@use "sass:color" as *;
$h: hue(#e1d7d2);

🎨 HSL Trio: Hue, Saturation, Lightness

Official docs also list color.saturation() and color.lightness() the same way (deprecated readers for the other two HSL channels). Together they rebuild the classic hsl(h, s, l) triple from any legacy color.

• Hue near 0deg / 360deg → reds on the classic wheel
• Hue near 120deg → greens (named lime is 120deg)
• Hue near 240deg → blues (named blue is 240deg)

📋 color.hue vs color.channel

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished number—no color.hue() call remains at runtime.

Examples Gallery

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;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize color.hue in older HSL workflows.
• Safe migrations — replace with color.channel($c, "hue") on Dart Sass 1.79+.
• Token audits — sort brand hexes by warmth on the color wheel.
• Conditional mixins — treat hues near 0deg as warm and near 240deg as cool.
• Teaching HSL — show that every color has an angle, even soft grays.

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "hue").
• Bare hue() without as * — may compile as a CSS function string.
• Modern color spaces — $color must be legacy for color.hue.
• Confusing with CSS hue() / relative color — Sass runs at compile time; CSS relative color is a different feature.
• Expecting a color back — this helper reads an angle; use adjust/change to rotate.

💡 Best Practices