LESS Color Functions

What Do LESS Color Functions Do?

LESS color functions take a color value (and usually a percentage or amount) and return a new, derived color. Internally, most operate on the HSL representation of a color, adjusting lightness, saturation, or hue.

Because these functions run at compile time, every derived color is a fixed, static value in the output CSS, there's no runtime color computation happening in the browser.

@brand: #2563eb;

.button {
  background: @brand;

  &:hover {
    background: darken(@brand, 10%);
  }
}

darken(@brand, 10%) computes a fixed hover color once, at compile time, from the single @brand source value.

Color Function Syntax

lighten(@color, amount%)
darken(@color, amount%)
fade(@color, amount%)
mix(@color1, @color2, weight%)

• Most color functions accept a color followed by a percentage amount.
• lighten() and darken() adjust the HSL lightness channel by the given percentage.
• fade() sets absolute alpha transparency; fadein()/fadeout() adjust it relatively.
• Channel extraction functions (red(), hue(), lightness()) return a single numeric value from a color.

LESS Color Functions Cheatsheet

The most commonly used color functions and what each one does.

Adjusting Lightness and Saturation

lighten() and darken() are the two most frequently used color functions, ideal for generating hover, active, and border states from a single brand color without hardcoding a separate hex value for each state.

@primary: #2563eb;

.btn-primary {
  background: @primary;
  border: 1px solid darken(@primary, 15%);

  &:hover { background: darken(@primary, 8%); }
  &:active { background: darken(@primary, 15%); }
}

Transparency with fade(), fadein(), and fadeout()

fade(@color, @amount) sets the color's alpha channel to an absolute percentage, while fadein() and fadeout() adjust the current alpha relatively, useful for building overlay and disabled states.

@overlay: fade(black, 50%);      // rgba(0, 0, 0, 0.5)
@subtle: fadeout(@primary, 40%);  // reduces existing alpha by 40 percentage points

Mixing Colors and Rotating Hue

mix() blends two colors together by a weighted percentage, and spin() rotates a color's hue around the color wheel, both useful for generating a broader palette from a small set of brand colors.

@blend: mix(#2563eb, #f59e0b, 50%); // an even blend of blue and amber
@complementary: spin(#2563eb, 180);  // rotates hue 180 degrees

spin() wraps around the 360-degree hue wheel, so spin(@c, 380) behaves the same as spin(@c, 20).

Common Mistakes

• Hardcoding a separate hex value for every hover and active state instead of deriving them from one base color.
• Confusing fade() (sets absolute alpha) with fadeout() (adjusts alpha relatively); they behave very differently.
• Assuming color functions operate on RGB channels directly; most operate on HSL (hue, saturation, lightness) internally.
• Overusing spin() for large hue rotations, which can produce colors that clash with an established brand palette.

Key Takeaways

• Color functions derive new colors from a base color, computed once at compile time.
• lighten()/darken() adjust HSL lightness; saturate()/desaturate() adjust HSL saturation.
• fade() sets absolute alpha; fadein()/fadeout() adjust alpha relatively.
• mix() blends two colors, and spin() rotates hue, both useful for generating broader palettes.