Sass color.red() Function

What You’ll Learn

color.red() belongs to the built-in sass:color module (Deprecated Functions). It returns a legacy color’s RGB red channel as a unitless number from 0 to 255 at compile time. This page covers the RGB idea, siblings green / blue, migration to color.channel(), and five compiled examples.

What Is color.red()?

Red here means the first channel in classic RGB—how much red light the color mixes in. Official docs: color.red() returns that channel as a number between 0 and 255. It only reads the value; it does not tint the color red.

• color.red(#e1d7d2) → 225
• color.red(white) → 255
• color.red(black) → 0

📝 Syntax

Load the color module, then pass a legacy color:

@use "sass:color";

// Deprecated — still works on legacy colors
color.red($color)

// Optional — bring members into scope
@use "sass:color" as *;
red($color)

// Recommended migration (Dart Sass 1.79+)
color.channel($color, "red")

Parameters

Return value

📦 Loading sass:color & Migrating

Prefer the namespaced form. Bare red() only works after @use "sass:color" as *;—otherwise CSS may keep the call as a plain string (or collide with the named color red in confusing ways).

@use "sass:color";

// Old (deprecated, still available)
$r: color.red(#e1d7d2); // 225

// New — preferred on Dart Sass 1.79+
$r: color.channel(#e1d7d2, "red");

// Optional global-style import
@use "sass:color" as *;
$r: red(#e1d7d2);

🎨 RGB Trio: Red, Green, Blue

Official docs also list color.green() and color.blue() the same way (deprecated readers for the other two channels). Together they rebuild the classic rgb(r, g, b) triple from any legacy color.

• Red high, blue low → often a warmer / more fiery look
• Red 255 → full red channel (white has all three at 255)
• Red 0 → no red light (black is all zeros)

📋 color.red vs color.channel

🛠 Compatibility

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

Examples Gallery

Examples use color.red(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted).

@use "sass:color";

@debug color.red(#e1d7d2); // 225

.swatch {
  --red: #{color.red(#e1d7d2)};
}

.swatch {
  --red: 225;
}

@use "sass:color";

@debug color.red(white); // 255
@debug color.red(black); // 0

.extremes {
  --white: #{color.red(white)};
  --black: #{color.red(black)};
}

.extremes {
  --white: 255;
  --black: 0;
}

@use "sass:color";

$brand: #336699;

.rgb-report {
  --red: #{color.red($brand)};
  --green: #{color.green($brand)};
  --blue: #{color.blue($brand)};
}

.rgb-report {
  --red: 51;
  --green: 102;
  --blue: 153;
}

@use "sass:color";

.accent {
  --red: #{color.red(#f20)};
  --bias: #{if(color.red(#f20) > color.blue(#f20), "warm", "cool")};
}

.accent {
  --red: 255;
  --bias: warm;
}

@use "sass:color" as *;

.panel {
  --red: #{red(#e1d7d2)};
}

.panel {
  --red: 225;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize color.red in older RGB workflows.
• Safe migrations — replace with color.channel($c, "red") on Dart Sass 1.79+.
• Token audits — report full RGB triples for brand hexes.
• Conditional mixins — treat high-red colors as warm accents.
• Teaching RGB — show that hex is three 0–255 dials.

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "red").
• Bare red() without as * — may compile as a CSS function/color string.
• Modern color spaces — $color must be legacy for color.red.
• Confusing with CSS red — the named color is paint; this helper returns a number.
• Expecting a color back — this helper reads a channel; use adjust/change to write.

💡 Best Practices