Sass color.green()

Definition and Usage

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

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

Syntax

@use "sass:color";

// Deprecated reader
color.green(#e1d7d2); // 215
color.green(white);   // 255
color.green(black);   // 0

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

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

Migrate to color.channel

Side-by-side mapping:

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

Related Functions

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

SCSS Examples

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

@use "sass:color";

@debug color.green(#e1d7d2); // 215

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

.swatch {
  --green: 215;
}

@use "sass:color";

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

.extremes {
  --white: #{color.green(white)};
  --black: #{color.green(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 {
  --green: #{color.green(#0a3)};
  --bias: #{if(color.green(#0a3) > color.red(#0a3), "lush", "warm")};
}

.deep {
  --green: 170;
  --bias: lush;
}

@use "sass:color" as *;

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

.panel {
  --green: 215;
}

Sass Support

color.green() 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.green($c) / green($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "green")
4. Add $space: rgb when reading non-legacy colors
5. Use adjust/change when you need to write green