Sass color.blue()

Definition and Usage

color.blue($color) returns the RGB blue channel of a legacy color as a unitless number between 0 and 255. Global alias: blue($color).

Official Sass docs mark it deprecated — prefer color.channel($color, "blue") on Dart Sass 1.79+. Pair with color.red() and color.green() when auditing a full RGB triple.

Syntax

@use "sass:color";

// Deprecated reader
color.blue(#e1d7d2); // 210
color.blue(white);   // 255
color.blue(black);   // 0

// Prefer today (Dart Sass 1.79+)
color.channel(#e1d7d2, "blue");
color.channel($c, "blue", $space: rgb);

Pattern: recognize color.blue in old files → rewrite with color.channel($c, "blue").

Migrate to color.channel

Side-by-side mapping:

To change blue, use writers like color.adjust($c, $blue: …) or color.change($c, $blue: …) — not the reader.

Related Functions

Prefer color.channel(). Sibling readers: color.red() / color.green(). Construct colors with rgb(). Shift channels with color.adjust(). Load via @use "sass:color".

SCSS Examples

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;
}

Sass Support

color.blue() remains for compatibility. New readers should use color.channel on Dart Sass 1.79+.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.blue($c) / blue($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "blue")
4. Add $space: rgb when reading non-legacy colors
5. Use adjust/change when you need to write blue