Sass color.blue() Function

What You’ll Learn

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

What Is color.blue()?

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

• color.blue(#e1d7d2) → 210
• color.blue(white) → 255
• color.blue(black) → 0

📝 Syntax

Load the color module, then pass a legacy color:

@use "sass:color";

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

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

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

Parameters

Return value

📦 Loading sass:color & Migrating

Prefer the namespaced form. Bare blue() only works after @use "sass:color" as *;—otherwise CSS may keep the call as a plain string.

@use "sass:color";

// Old (deprecated, still available)
$b: color.blue(#e1d7d2); // 210

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

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

🎨 RGB Trio: Red, Green, Blue

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

• Blue high, red low → often a cooler / more cyan-leaning look
• Blue 255 → full blue channel (white has all three at 255)
• Blue 0 → no blue light (black is all zeros)

📋 color.blue vs color.channel

🛠 Compatibility

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

Examples Gallery

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

@use "sass:color";

@debug color.blue(#e1d7d2); // 210

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

.swatch {
  --blue: 210;
}

@use "sass:color";

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

.extremes {
  --white: #{color.blue(white)};
  --black: #{color.blue(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";

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

.deep {
  --blue: 102;
  --bias: cool;
}

@use "sass:color" as *;

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

.panel {
  --blue: 210;
}

🚀 Real-World Use Cases

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

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "blue").
• Bare blue() without as * — may compile as a CSS function string.
• Modern color spaces — $color must be legacy for color.blue.
• Confusing with CSS blue — 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