Sass Colors

What You’ll Learn

Sass colors represent a point in a color space—just like CSS. This page covers writing colors, legacy vs modern spaces, sass:color helpers, alpha, and five compiled examples.

What Are Sass Colors?

Official docs: Sass has built-in support for color values. Each color is a point in a particular color space such as rgb or lab. You can write them as:

• Hex codes — #f2ece4, #b37399aa (with alpha)
• CSS color names — midnightblue, transparent
• Functions — rgb(), hsl(), hwb(), and on modern Dart Sass also lab(), oklch(), color()

📝 Syntax

$cream: #f2ece4;
$brand: midnightblue;
$pink: rgb(204, 102, 153);
$violet: hsl(270, 50%, 40%);
$soft: #b37399aa; // 8-digit hex = alpha

🎨 Color Spaces

Official docs: Sass supports the same color spaces as CSS. A color is usually emitted in the space it was written in. Modern wide-gamut spaces (lab, oklch, display-p3, and more) need Dart Sass 1.79+. Older compilers mainly support legacy rgb / hsl (and often hwb).

Legacy spaces share the classic RGB gamut, so Sass can freely convert between them when emitting CSS. Explicitly pass $space / $method when you use newer color APIs so transforms stay predictable.

❓ Missing & Powerless Channels

Official docs (modern Dart Sass): channels can be written as none when a value is unknown or does not affect rendering—for example hsl(none 0% 50%) because hue does not matter at zero saturation.

• When mixing colors, a missing channel can take the other color’s value.
• Converting spaces can preserve analogous none channels.
• Check with color.is-missing() / color.is-powerless() when available.

🧮 Color Functions

Load @use "sass:color" for helpers that mix colors or scale channels. Official tip: write color spaces as unquoted strings (to match CSS) and channel names as quoted strings so "red" is not parsed as the color red.

@use "sass:color";

$venus: #998099;

$lighter: color.scale($venus, $lightness: 15%);
$blend: color.mix($venus, midnightblue);
$fade: color.change($venus, $alpha: 0.5);

Examples Gallery

Examples use common legacy spaces that compile widely. Open View Compiled CSS for verified output.

@use "sass:meta";

.basics {
  --hex: #{meta.inspect(#f2ece4)};
  --hex-a: #{meta.inspect(#b37399aa)};
  --name: #{meta.inspect(midnightblue)};
  --rgb: #{meta.inspect(rgb(204, 102, 153))};
  --hsl: #{meta.inspect(hsl(270, 50%, 40%))};
}

.basics {
  --hex: #f2ece4;
  --hex-a: rgba(179, 115, 153, 0.6666666667);
  --name: midnightblue;
  --rgb: rgb(204, 102, 153);
  --hsl: hsl(270, 50%, 40%);
}

@use "sass:color";
@use "sass:meta";

$venus: #998099;

.scale-mix {
  --scaled: #{meta.inspect(color.scale($venus, $lightness: 15%))};
  --mixed: #{meta.inspect(color.mix($venus, midnightblue))};
  --alpha: #{meta.inspect(color.change($venus, $alpha: 0.5))};
  --red: #{meta.inspect(color.red($venus))};
}

.scale-mix {
  --scaled: #a893a8;
  --mixed: #594d85;
  --alpha: rgba(153, 128, 153, 0.5);
  --red: 153;
}

@use "sass:color";

$brand: #336699;

.theme {
  color: $brand;
  background: color.scale($brand, $lightness: 40%);
  border-color: color.adjust($brand, $saturation: -20%);
  outline-color: color.mix($brand, white, 30%);
}

.theme {
  color: #336699;
  background: #75a3d1;
  border-color: #476685;
  outline-color: #c2d1e0;
}

@use "sass:color";
@use "sass:meta";

$base: hsl(200deg, 60%, 45%);

.channels {
  --h: #{meta.inspect(color.hue($base))};
  --s: #{meta.inspect(color.saturation($base))};
  --l: #{meta.inspect(color.lightness($base))};
  --a: #{meta.inspect(color.alpha($base))};
  --type: #{meta.type-of($base)};
  --comp: #{meta.inspect(color.complement($base))};
}

.channels {
  --h: 200deg;
  --s: 60%;
  --l: 45%;
  --a: 1;
  --type: color;
  --comp: #b85c2e;
}

@use "sass:color";
@use "sass:meta";

$grey: hsl(0, 0%, 50%);

.missing-like {
  --mix: #{meta.inspect(color.mix($grey, blue))};
  --hwb: #{meta.inspect(hwb(270, 20%, 40%))};
  --trans: #{meta.inspect(transparent)};
  --rgba: #{meta.inspect(rgba(179, 115, 153, 0.67))};
}

.missing-like {
  --mix: #4040c0;
  --hwb: hwb(270, 20%, 40%);
  --trans: transparent;
  --rgba: rgba(179, 115, 153, 0.67);
}

🚀 Real-World Use Cases

• Design tokens — one brand hex drives buttons, borders, and surfaces.
• Hover / active states — scale lightness instead of hard-coding hex.
• Overlays — color.change($c, $alpha: …) for translucent layers.
• Accent pairs — color.complement or mixes with white/black.
• Theming — swap the root brand color and regenerate the palette.

⚠️ Common Pitfalls

• Using deprecated lighten() / darken() — prefer color.scale / color.adjust.
• Unquoted channel names — red is a color; use "red" when an API asks for a channel.
• Assuming every compiler supports oklch/lab — need recent Dart Sass.
• Mixing strings that look like colors — "blue" is a string, not a color.
• Hand-maintaining huge palettes — derive from one brand token instead.

💡 Best Practices