Adjust-hue for color rotation in SASS

Introduction

Adjust-hue helps you change a color's shade by rotating its color wheel position. This lets you create new colors easily without picking them manually.

You want to create a color theme with different shades from one base color.

You need to highlight a button by changing its color slightly on hover.

You want to create color variations by shifting its hue.

You want to create a smooth color transition effect in your design.

You want to keep consistent color harmony by rotating hues instead of random colors.

Syntax

SASS

color.adjust-hue($color, $degrees)

$color is the original color you want to change.

$degrees is how much you rotate the color on the color wheel. Positive values rotate clockwise, negative values rotate counterclockwise.

Examples

This rotates red 90 degrees on the color wheel, changing it to a greenish color.

SASS

$new-color: color.adjust-hue(#ff0000, 90deg);

This rotates blue 45 degrees counterclockwise, giving a purple shade.

SASS

$new-color: color.adjust-hue(#00f, -45deg);

This rotates semi-transparent red 180 degrees, resulting in a semi-transparent cyan.

SASS

$new-color: color.adjust-hue(rgba(255, 0, 0, 0.5), 180deg);

Sample Program

This code sets a button with a tomato red background. When you hover over it, the background color changes by rotating the hue 120 degrees, creating a fresh greenish color. The transition makes the color change smooth.

SASS

@use 'sass:color';

$base-color: #ff6347; // tomato red
$rotated-color: color.adjust-hue($base-color, 120deg);

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: $rotated-color;
}

Important Notes

Adjust-hue works best with colors in the HSL color space internally.

Rotation is circular, so 360deg rotation returns the original color.

The angle must be specified with a unit like 'deg' (e.g., 90deg).

Summary

Use adjust-hue to rotate a color's hue on the color wheel.

This helps create color variations easily and keeps color harmony.

Positive degrees rotate clockwise, negative degrees rotate counterclockwise.