Sass adjust-hue()

Definition and Usage

Global adjust-hue($color, $degrees) increases or decreases a legacy color’s HSL hue. Example: adjust-hue(#6b717f, 60deg) → #796b7f.

Official Sass docs list it under Deprecated Functions. There is no color.adjust-hue() — migrate to color.adjust($color, $hue: $amount, $space: hsl).

Syntax

// Deprecated global (legacy code)
adjust-hue(#6b717f, 60deg);   // #796b7f
adjust-hue(#d2e1dd, -60deg);  // #d6e1d2
adjust-hue(#036, 45);         // #1a0066

// Prefer today
@use "sass:color";
color.adjust(#6b717f, $hue: 60deg, $space: hsl);

Pattern: recognize adjust-hue in old files → rewrite with color.adjust + $hue (+ $space: hsl on Dart Sass 1.79+).

Migrate to color.adjust

Side-by-side mapping:

Related Functions

Prefer color.adjust(). Read hue with color.hue(). Opposite on the wheel: complement(). Absolute hue sets use color.change(). Load the module via @use.

SCSS Examples

Examples use the deprecated global 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;
}

Sass Support

adjust-hue() remains as a global for compatibility. New work should use sass:color on Dart Sass.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find adjust-hue($color, $degrees) in legacy SCSS
2. Add @use "sass:color" at the top of the file
3. Replace with color.adjust($color, $hue: $degrees, $space: hsl)
4. Prefer angle units like 60deg over bare 60
5. Retest palette / hover accents visually