Complement and invert functions in SASS

Introduction

Complement and invert functions help you change colors easily. They make your design look balanced and readable.

When you want to create a color that stands out against a background.

When you need to make text readable on different colored backgrounds.

When designing themes that switch between light and dark modes.

When you want to add visual interest by using opposite colors.

When adjusting colors for accessibility and contrast.

Syntax

SASS

color.complement($color)
color.invert($color)

complement() returns the opposite color on the color wheel.

invert() returns the color that is the inverse of the original color's RGB values.

Examples

This example shows how to get the complement and invert of a blue color.

SASS

$color: #3498db;
$comp-color: color.complement($color);
$inv-color: color.invert($color);

Using invert() to make text color opposite of a dark background for readability.

SASS

body {
  background-color: #222;
  color: color.invert(#222);
}

Get a complementary color for a red primary color to use as a secondary color.

SASS

$primary: #e74c3c;
$secondary: color.complement($primary);

Sample Program

This Sass code sets a blue background. It uses invert() to make the text color easy to read on blue. The heading uses the complementary color for contrast.

SASS

@use "sass:color";

$base-color: #3498db;
$comp-color: color.complement($base-color);
$inv-color: color.invert($base-color);

body {
  background-color: $base-color;
  color: $inv-color;
  padding: 2rem;
  font-family: Arial, sans-serif;
}

h1 {
  color: $comp-color;
}

Important Notes

Complement colors are opposite on the color wheel, great for contrast.

Invert flips RGB values, useful for quick color opposites.

Use these functions to improve accessibility and visual balance.

Summary

Complement gives the opposite color on the color wheel.

Invert flips the RGB values of a color.

Both help create readable and balanced color designs.