Sass color.invert()

Beginner
12 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.invert creating color negatives with optional weight
Definition

Definition and Usage

color.invert() returns the inverse / negative of a color in a chosen space — like a photo negative, not just a hue spin. Load it with @use "sass:color". The global alias is invert().

Optional $weight (default 100%) blends between the original (0%) and the full negative (100%). Weight 50% always yields a medium-lightness gray in that space.

Pass $space when you can.

Official docs: for legacy colors $space is optional and defaults to the color’s own space. On Dart Sass 1.79+, pass it explicitly (e.g. $space: rgb).

Official samples.

color.invert(#b37399, $space: rgb) → #4c8c66. Partial: color.invert(#550e0c, 20%, $space: display-p3) soft-pulls toward the negative in Display P3.

Not CSS filter: invert().

Sass compiles a finished color. CSS filter: invert() is a runtime visual effect on an element or image.

Syntax

Syntax

SCSS
@use "sass:color";

color.invert(#b37399, $space: rgb);                 // #4c8c66
color.invert(#550e0c, 20%, $space: display-p3);     // soft pull in Display P3
color.invert($brand, $weight: 50%);                 // medium gray
color.invert($brand, $weight: 30%);                 // partial negative

// Global alias
invert(#b37399);

Pattern: pick a brand color → full invert for a twin accent, or use $weight for a softer pull / mid gray.

Reference

vs CSS Filter / Complement

Same word, different jobs:

NeedUse
Compile-time negative colorcolor.invert($c) / color.invert($c, $weight: 30%)
Runtime visual flip (photo / UI)CSS filter: invert(1)
Opposite hue (180deg)color.complement()
Mute to gray, keep lightnesscolor.grayscale()
WeightResult feel
0%Same as the original
30%Slight pull toward the negative
50%Medium-lightness gray
100% (default)Full inverse / negative
Code

SCSS Examples

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

Example 1 — Full Color Negatives

Default weight 100% (official-style result for #b37399).

SCSS
@use "sass:color";

@debug color.invert(#b37399, $space: rgb); // #4c8c66

.swatches {
  color: color.invert(#b37399, $space: rgb);
  outline-color: color.invert(black);
  border-color: color.invert(#d2dfd9);
}

How It Works

  1. Full weight returns the complete negative.
  2. Rose pink flips to greenish #4c8c66.
  3. Black becomes white; light mint becomes a dark purple-brown.
  4. Browsers receive hex / keywords — no Sass call remains.

Example 2 — Invert Brand Accents

Derive opposite fills from blue, green, and red tokens.

SCSS
@use "sass:color";

.negatives {
  color: color.invert(#336699);
  background: color.invert(#4caf50);
  outline-color: color.invert(#c65353);
}

How It Works

  1. Each brand becomes its channel negative.
  2. Useful for alternate themes or badge twins from one token set.
  3. Still check contrast before shipping interactive text.
  4. Not the same as color.complement() (hue +180deg).

Example 3 — Weight Ladder from One Brand

Full invert, mid gray, and a soft pull toward the negative.

SCSS
@use "sass:color";

$brand: #336699;

.card {
  background: $brand;
  color: color.invert($brand);
  border-color: color.invert($brand, $weight: 50%);
  outline-color: color.invert($brand, $weight: 30%);
}

How It Works

  1. Default 100% gives the full twin accent.
  2. 50% lands on a medium gray (Sass may emit the gray keyword).
  3. 30% keeps more of the brand while edging toward the negative.
  4. Pass percentages like 30%, not bare 30.

Example 4 — Explicit $space + CSS Filter

Official-style space argument beside a true CSS filter (Dart Sass 1.79+).

SCSS
@use "sass:color";

.chip {
  // Sass: compile-time negative in rgb
  color: color.invert(#b37399, $space: rgb);
  // Soft pull in a wide-gamut space (1.79+)
  border-color: color.invert(#550e0c, 20%, $space: display-p3);
}

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

How It Works

  1. $space: rgb matches the official full-invert sample.
  2. Partial weight in Display P3 soft-pulls without a full flip.
  3. filter: invert(1) stays a CSS filter for the browser.
  4. Prefer module names so Sass invert never looks like the CSS filter.

Example 5 — Module vs Global + Double Invert

Both names match; inverting twice restores the original.

SCSS
@use "sass:color";

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

How It Works

  1. Module and global full inverts match.
  2. Prefer color.invert() in new SCSS.
  3. Second full invert undoes the first for this opaque color.
  4. Handy when teaching negatives vs hue complements.

Edge Cases & Pitfalls

Most invert bugs are mixing it up with CSS filters or complement, or skipping weight units.

filter

Not CSS filter: invert()

Sass builds a color token. CSS filters flip pixels at runtime — they do not generate design tokens.

complement

Different from complement

complement rotates hue by 180deg. invert is a channel / photographic negative (with optional weight).

space

$space needs 1.79+

Bare color.invert($hex) works earlier. Passing $space requires Dart Sass 1.79+.

a11y

Contrast is not automatic

Inverted text on inverted backgrounds can still fail accessibility checks — verify contrast.

Toolchain

Sass Support

This is about Sass compilers, not browsers. Compiled CSS receives a finished color.

FeatureStatus
@use "sass:color" / color.invertDart Sass 1.23+
$weight (0%–100%)Widely available
$spaceDart Sass 1.79+
Global invert()Older compilers / legacy SCSS
LibSass / Ruby SassNo modern module API

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Inverse / negative of a color — not a hue-only complement.
  • $weight blends original → negative; 50% = medium gray.
  • Pass $space on Dart Sass 1.79+; prefer color.invert().
  • Keep CSS filters for photos/UI chrome — not design tokens.

One line: color.invert builds a compile-time negative (with optional weight/space) — not a CSS filter.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color"
2. Resolve $color in $space (or legacy default space)
3. Build the full negative
4. Mix original ↔ negative using $weight
5. Emit a finished CSS color (hex / rgb / keyword)

Frequently Asked Questions

color.invert($color, $weight: 100%, $space: null) returns the inverse or negative of a color. Example: color.invert(#b37399, $space: rgb) is #4c8c66.
Weight must be between 0% and 100%. Higher values move closer to the full negative; lower values stay closer to the original. Weight 50% always produces a medium-lightness gray in that space.
Add @use "sass:color"; then call color.invert($brand) or color.invert($brand, $weight: 30%). Prefer the module form. The global alias is invert().
No. Sass color.invert() compiles to a finished color value. CSS filter: invert() is a runtime visual effect on an element or image.
Yes for a full invert (weight 100%) in the same space: color.invert(color.invert($c)) returns to the starting color for typical opaque colors.
The module form needs Dart Sass with @use (about 1.23+). The $space argument needs Dart Sass 1.79+. LibSass/Ruby Sass may expose a global invert() but lack the modern module API.

Next: Sass color.is-legacy()

Check whether a color uses a legacy RGB / HSL / HWB space.

color.is-legacy() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.ie-hex-str Function Sass color.is-legacy Function