Sass adjust-hue() Function

What You’ll Learn

adjust-hue() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It rotates a legacy color’s HSL hue by $degrees at compile time. This page covers the parameter range, legacy-color rule, why the module system skipped it, how to migrate to color.adjust(), and five compiled examples.

What Is adjust-hue()?

Adjust-hue means “spin this color around the HSL hue wheel by a fixed amount.” Official docs: it increases or decreases $color’s HSL hue. Saturation and lightness stay put—only the hue angle moves. Positive degrees go one way around the wheel; negative degrees go the other.

• adjust-hue(#6b717f, 60deg) → #796b7f (hue 222deg → 282deg)
• adjust-hue(#d2e1dd, -60deg) → #d6e1d2 (hue 164deg → 104deg)
• adjust-hue(#036, 45) → #1a0066 (hue 210deg → 255deg)

📝 Syntax

Call the global function with a legacy color and a hue delta:

// Deprecated global (legacy colors only)
adjust-hue($color, $degrees)

// Recommended migration (module system)
@use "sass:color";
color.adjust($color, $hue: $degrees, $space: hsl) // Dart Sass 1.79+

Parameters

Return value

📦 Why There Is No color.adjust-hue()

Official docs’ heads-up: because adjust-hue() is redundant with color.adjust(), it is not included directly in the new module system. You will not find color.adjust-hue after @use "sass:color".

// Old (deprecated global)
$accent: adjust-hue(#6b717f, 60deg);

// New — preferred
@use "sass:color";
$accent: color.adjust(#6b717f, $hue: 60deg, $space: hsl); // Dart Sass 1.79+

// Also works for many legacy colors on older Dart Sass
$accent: color.adjust(#6b717f, $hue: 60deg);

🎨 Understanding $degrees

The second argument is a relative hue change, not an absolute hue target. Official docs allow any angle unit or a unitless number in the -360deg…360deg range.

• 60deg and unitless 60 produce the same shift for hex brands.
• Negative values rotate the opposite direction (-60deg).
• For an absolute hue, use color.change() with $hue instead.

📋 adjust-hue vs color.adjust

Same idea for hue—different APIs and futures.

🛠 Compatibility

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

Examples Gallery

Examples use the deprecated global adjust-hue() where noted, plus a modern color.adjust() migration. Open View Compiled CSS for verified output (matches official Sass docs samples).

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

.swatch {
  --base: #6b717f;
  --plus60: #{adjust-hue(#6b717f, 60deg)};
}

.swatch {
  --base: #6b717f;
  --plus60: #796b7f;
}

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

.mint {
  color: adjust-hue(#d2e1dd, -60deg);
}

.mint {
  color: #d6e1d2;
}

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

.deep {
  background: adjust-hue(#036, 45);
}

.deep {
  background: #1a0066;
}

@use "sass:color";

// Prefer on Dart Sass 1.79+:
// color.adjust($c, $hue: 60deg, $space: hsl)

.tokens {
  --plus60: #{color.adjust(#6b717f, $hue: 60deg)};
  --minus60: #{color.adjust(#d2e1dd, $hue: -60deg)};
}

.tokens {
  --plus60: #796b7f;
  --minus60: #d6e1d2;
}

$brand: #336699;

.palette {
  --brand: #{$brand};
  --warm: #{adjust-hue($brand, 30deg)};
  --cool: #{adjust-hue($brand, -30deg)};
  --far: #{adjust-hue($brand, 120deg)};
}

.palette {
  --brand: #336699;
  --warm: #333399;
  --cool: #339999;
  --far: #993366;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize adjust-hue in older themes and design systems.
• Safe migrations — replace with color.adjust(… $hue: …) one call at a time.
• Quick hue neighbors — derive warm/cool accents from a brand hex (prefer modern API).
• Teaching HSL — show relative hue without changing saturation or lightness.
• Pairing with complement — small deltas with adjust vs a full 180deg flip.

⚠️ Common Pitfalls

• Using it in new code — it is deprecated; prefer color.adjust.
• Expecting color.adjust-hue() — that name does not exist in sass:color.
• Modern color spaces — $color must be legacy; convert or use adjust with $space.
• Confusing with change — adjust-hue is relative; absolute hue needs color.change.
• Out-of-range deltas — stay within -360deg…360deg.

💡 Best Practices