Sass Colors

Beginner
9 min read
Updated: Nov 2026
5 examples
Dart Sass
Sass color values hex rgb hsl and modern color spaces
Definition

Definition and Usage

Sass colors are points in a color space (like rgb or lab), just like CSS. Write them as hex, names, or functions such as rgb(), hsl(), lab(), and color().

Transform with sass:color.

Prefer color.scale(), color.mix(), and color.change() over deprecated globals like darken().

Legacy vs modern spaces.

rgb, hsl, and hwb are legacy. Modern spaces (oklch, lab, display-p3, …) need recent Dart Sass (color spaces since 1.79).

Quote channel names.

Write "red" as a quoted string so Sass does not treat it as a color. Spaces like oklch stay unquoted.

Syntax

Syntax

SCSS
@use "sass:color";

$brand: #998099;                 // hex
$name: midnightblue;             // CSS name
$rgb: rgb(204 102 153);          // modern rgb()
$lab: lab(32.4% 38.4 -47.7 / 0.7);

$lighter: color.scale($brand, $lightness: +15%, $space: oklch);
$mixed: color.mix($brand, midnightblue, $method: oklch);

Pattern: write a color → store it in a variable → transform with sass:color (optionally naming a $space / $method).

Reference

Common Patterns

Ways you will write and change colors:

PatternResult idea
#f2ece4 / #b37399aaHex (8-digit includes alpha)
midnightblueCSS color name
rgb() / hsl() / hwb()Legacy spaces (same RGB gamut)
lab() / oklch() / color()Modern spaces (Dart Sass 1.79+)
color.scale() / color.mix()Transform / blend colors
hsl(none 0% 50%)Missing channel (none)
Code

SCSS Examples

Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

Example 1 — Official Color Literals

Hex, names, rgb(), lab(), and color() all count as color values.

SCSS
.swatches {
  --hex: #{#f2ece4};
  --hex-alpha: #{#b37399aa};
  --name: #{midnightblue};
  --rgb: #{rgb(204 102 153)};
  --lab: #{lab(32.4% 38.4 -47.7 / 0.7)};
  --p3: #{color(display-p3 0.597 0.732 0.576)};
}

How It Works

  1. Hex / name / functions are all color values.
  2. 8-digit hex includes alpha.
  3. lab / display-p3 keep their spaces in output.
  4. Matches the official literals sample idea.

Example 2 — Everyday UI Colors

Use colors directly in property declarations.

SCSS
.btn {
  color: #191970;
  background: #b37399aa;
  border-color: rgba(204, 102, 153, 0.5);
}

How It Works

  1. #191970 is opaque hex (midnightblue).
  2. #b37399aa compiles with alpha.
  3. rgba() also works as a value.
  4. Store repeated colors in variables.

Example 3 — Official color.scale + color.mix

Transform in oklch, still return a color in the original space.

SCSS
@use "sass:color";

$venus: #998099;

.demo {
  --scaled: #{color.scale($venus, $lightness: +15%, $space: oklch)};
  --mixed: #{color.mix($venus, midnightblue, $method: oklch)};
}

How It Works

  1. $space: oklch scales in a perceptual space.
  2. $method: oklch mixes in that space.
  3. Result stays in the input’s space (rgb here).
  4. Matches the official functions sample idea.

Example 4 — Official Missing Channels

none marks a channel that does not matter; mix / convert can fill it in.

SCSS
@use "sass:color";

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

.demo {
  --mixed: #{color.mix($grey, blue, $method: hsl)};
  --lch: #{color.to-space($grey, lch)};
}

How It Works

  1. Hue is none because grey has no hue.
  2. mix takes blue’s hue when mixing.
  3. to-space can keep an analogous none.
  4. Check with color.is-missing().

Example 5 — color.change Alpha

Set individual channels (including alpha) without deprecated globals.

SCSS
@use "sass:color";

$base: #c69;

.demo {
  --changed: #{color.change($base, $alpha: 0.5)};
  --space: #{color.space($base)};
}

How It Works

  1. #c69 expands to rgb channels.
  2. color.change sets alpha to 0.5.
  3. color.space reports rgb.
  4. More on color.change().

Edge Cases & Pitfalls

Most color bugs are deprecated globals or mixing modern spaces on old compilers.

darken

Avoid darken() / lighten()

Use color.scale() or color.adjust() instead.

space

Name the space when transforming

Pass $space / $method (for example oklch) so results stay predictable.

quotes

Quote channel names

"red" is a channel; bare red is a color name.

1.79

Modern spaces need Dart Sass 1.79+

lab, oklch, and color() are not available on LibSass / old Dart Sass.

Toolchain

Sass Support

Color values are core Sass; modern spaces need recent Dart Sass.

FeatureStatus
Hex / names / rgb / hsl / hwbSupported
8-digit hex alphaDart Sass 1.14+ (not LibSass)
Modern color spacesDart Sass 1.79+
sass:color moduleSupported—prefer over globals

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Write hex, names, or color functions.
  • Transform with sass:color (scale, mix, change).
  • Name a space like oklch when scaling or mixing.
  • none marks missing channels in modern color math.

One line: store brand colors as values, then reshape them with sass:color instead of hand-tuned hex variants.

Practice

Compile Notes

Practical checklist:

checklist.txt
1. Write colors as hex, names, or rgb()/hsl()/…
2. @use "sass:color" for transforms
3. Prefer color.scale / color.mix / color.change
4. Pass $space or $method when using modern spaces
5. Quote channel names ("red"); leave spaces unquoted (oklch)

Frequently Asked Questions

Use hex codes (#f2ece4), CSS color names (midnightblue), or functions like rgb(), hsl(), hwb(), and—on modern Dart Sass—lab(), oklch(), and color().
rgb, hsl, and hwb are legacy spaces that share the classic RGB gamut. Older Sass color functions freely work across these three. Newer spaces need recent Dart Sass.
Load @use "sass:color" and prefer color.scale(), color.mix(), and color.change() over deprecated globals like darken() or lighten().
Channel names like "red" must be quoted so Sass does not parse them as color values. Color spaces should be unquoted strings to match CSS (for example oklch).
Yes on modern Sass: #b37399aa is an 8-digit hex with alpha. Older LibSass may not support that syntax.
Sass can transform in another space internally, but it returns a color in the same space you gave it unless you call color.to-space().

Next: Sass Lists

Store sequences of values—including lists of colors—for loops and helpers.

Lists →

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 Strings Sass Lists