Sass color.invert() Function

What You’ll Learn

color.invert() belongs to the built-in sass:color module. It builds the inverse (negative) of a color at compile time, with an optional weight that blends toward that negative. This page covers $weight, optional $space (Dart Sass 1.79+), how it differs from CSS filter: invert(), and five compiled examples.

What Is color.invert()?

Invert means “flip this color toward its photographic negative.” Official docs call the result the inverse or negative of $color. Black becomes white, and a rose pink becomes a greenish complement-style negative—not just a hue spin like complement.

• color.invert(#b37399) → #4c8c66
• color.invert(black) → white
• color.invert(#d2dfd9) → #2d2026

📝 Syntax

Load the color module, then pass a color, optional weight, and optional space:

@use "sass:color";

color.invert($color, $weight: 100%, $space: null)
// Global alias:
// invert($color, $weight: 100%, $space: null)

Parameters

Return value

📦 Loading sass:color

Prefer the module API. Official docs also document the global name invert() for older stylesheets.

// Recommended — namespaced
@use "sass:color";
$neg: color.invert(#b37399);

// Optional — bring members into the current namespace
@use "sass:color" as *;
$neg: invert(#b37399);

// Optional — custom namespace
@use "sass:color" as c;
$neg: c.invert(#b37399);

// Legacy global name
$neg: invert(#b37399);

⚖️ Understanding $weight

Official docs: a higher weight means closer to the negative; a lower weight stays closer to $color. Weight 50% always produces a medium-lightness gray in that space.

📋 Sass invert() vs CSS filter: invert()

Same English word, different jobs—just like grayscale.

📋 invert vs complement

Both change how a color “feels opposite,” but they are not the same math.

🛠 Compatibility

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

Examples Gallery

Each example uses @use "sass:color". Open View Compiled CSS to see what Dart Sass emits.

@use "sass:color";

@debug color.invert(#b37399); // #4c8c66

.swatches {
  color: color.invert(#b37399);
  outline-color: color.invert(black);   // white
  border-color: color.invert(#d2dfd9);  // #2d2026
}

.swatches {
  color: #4c8c66;
  outline-color: white;
  border-color: #2d2026;
}

@use "sass:color";

.negatives {
  color: color.invert(#336699);         // #cc9966
  background: color.invert(#4caf50);    // #b350af
  outline-color: color.invert(#c65353); // #39acac
}

.negatives {
  color: #cc9966;
  background: #b350af;
  outline-color: #39acac;
}

@use "sass:color";

$brand: #336699;

.card {
  background: $brand;
  color: color.invert($brand);                 // full negative
  border-color: color.invert($brand, $weight: 50%);  // medium gray
  outline-color: color.invert($brand, $weight: 30%); // partial
}

.card {
  background: #336699;
  color: #cc9966;
  border-color: gray;
  outline-color: #61758a;
}

@use "sass:color";

.chip {
  // Sass: compile-time negative color value
  color: color.invert(#336699);
}

.photo.is-negative {
  // CSS: runtime filter on the element (not a Sass color helper)
  filter: invert(1);
}

.chip {
  color: #cc9966;
}

.photo.is-negative {
  filter: invert(1);
}

@use "sass:color";

.names {
  --module: #{color.invert(#b37399)};
  --global: #{invert(#b37399)};
  --round-trip: #{color.invert(color.invert(#b37399))};
}

.names {
  --module: #4c8c66;
  --global: #4c8c66;
  --round-trip: #b37399;
}

🚀 Real-World Use Cases

• Alternate accents — derive a negative twin from one brand hex.
• High-contrast chips — pair a fill with its invert for text/icons (still check a11y).
• Soft “washed” accents — use $weight: 20%–40% instead of a full flip.
• Neutral midtones — $weight: 50% for a related medium gray.
• Theme experiments — preview negatives before locking a palette.
• Teaching color math — show how invert differs from complement and CSS filters.

⚠️ Common Pitfalls

• Confusing CSS filter — filter: invert() does not produce a Sass color token.
• Mixing up with complement — hue +180deg is not the same as a channel negative.
• Using $space on older Dart Sass — needs 1.79+; bare color.invert($hex) still works earlier.
• Assuming contrast is automatic — inverted text on inverted backgrounds can still fail a11y checks.
• Forgetting weight units — pass percentages such as 30%, not bare 30.

💡 Best Practices