Sass color.green() Function

What You’ll Learn

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

What Is color.green()?

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

• color.green(#e1d7d2) → 215
• color.green(white) → 255
• color.green(black) → 0

📝 Syntax

Load the color module, then pass a legacy color:

@use "sass:color";

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

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

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

Parameters

Return value

📦 Loading sass:color & Migrating

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

@use "sass:color";

// Old (deprecated, still available)
$g: color.green(#e1d7d2); // 215

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

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

🎨 RGB Trio: Red, Green, Blue

Official docs also list color.red() 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.

• Green high, red low → often a lusher / more leafy look
• Green 255 → full green channel (white has all three at 255)
• Green 0 → no green light (black is all zeros)

📋 color.green vs color.channel

🛠 Compatibility

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

Examples Gallery

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

🚀 Real-World Use Cases

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

⚠️ Common Pitfalls

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