Sass color.channel()

Beginner
12 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.channel reading RGB HSL and alpha channel numbers
Definition

Definition and Usage

color.channel() returns the value of one channel as a number. Load it with @use "sass:color". It needs Dart Sass 1.79+.

The channel name must be a quoted string ("hue", "red", "alpha", …). Optional $space is an unquoted color-space name (rgb, hsl, oklch, …) and defaults to the color’s own space.

Official idea.

color.channel(hsl(80deg 30% 50%), "hue") → 80deg. With $space: rgb, the same color’s red is 140.25.

Units.

Hue returns deg. Saturation, lightness, whiteness, and blackness return %. RGB and alpha are usually unitless.

Missing channels return 0.

Official docs: a missing channel yields 0 (with a unit when needed). Use color.is-missing() to detect that case explicitly.

Syntax

Syntax

SCSS
@use "sass:color";

// Same-space reads
color.channel(hsl(80deg 30% 50%), "hue");        // 80deg
color.channel(#6b717f, "red");                   // 107
color.channel($c, "alpha");

// Cross-space reads ($space unquoted)
color.channel(hsl(80deg 30% 50%), "hue", $space: oklch);
color.channel(hsl(80deg 30% 50%), "red", $space: rgb);
color.channel($hex, "lightness", $space: hsl);

Pattern: @use "sass:color" → quote the channel name → optionally set $space → use the number in conditions, CSS vars, or rgba().

Reference

vs Older Getters

color.channel is the modern unified reader. Older space-specific getters still work and are preferred below Dart Sass 1.79:

Older getterPrefer on 1.79+
color.red($c)color.channel($c, "red")
color.blue($c)color.channel($c, "blue")
color.alpha($c)color.channel($c, "alpha")
color.hue($c)color.channel($c, "hue", $space: hsl) for hex/RGB

Writers stay separate: adjust / change return colors; channel only returns a number.

Code

SCSS Examples

Each example uses @use "sass:color" on Dart Sass 1.79+. Open View Compiled CSS to see what Sass emits.

Example 1 — Read HSL Channels

Pull hue, saturation, and lightness (official docs style).

SCSS
@use "sass:color";

$swatch: hsl(80deg 30% 50%);

@debug color.channel($swatch, "hue");        // 80deg
@debug color.channel($swatch, "saturation"); // 30%
@debug color.channel($swatch, "lightness");  // 50%

.token {
  --hue: #{color.channel($swatch, "hue")};
  --sat: #{color.channel($swatch, "saturation")};
  --light: #{color.channel($swatch, "lightness")};
}

How It Works

  1. Color already lives in HSL, so no $space is needed.
  2. "hue" returns 80deg.
  3. Percentage channels keep their % units.
  4. Interpolation writes the numbers into CSS custom properties.

Example 2 — Read RGB Channels from Hex

Inspect red, green, blue, and alpha on a hex color.

SCSS
@use "sass:color";

$ink: #6b717f;

.channels {
  --red: #{color.channel($ink, "red")};
  --green: #{color.channel($ink, "green")};
  --blue: #{color.channel($ink, "blue")};
  --alpha: #{color.channel($ink, "alpha")};
}

How It Works

  1. Hex is an RGB color, so RGB channel names apply directly.
  2. Red / green / blue return unitless 0–255 style numbers.
  3. Fully opaque colors report alpha 1.
  4. Same idea as the older color.red() / color.blue() getters.

Example 3 — Read a Channel in Another Space

Pass $space to convert and read (official docs examples).

SCSS
@use "sass:color";

$swatch: hsl(80deg 30% 50%);

@debug color.channel($swatch, "hue", $space: oklch); // 124.279238779deg
@debug color.channel($swatch, "red", $space: rgb);   // 140.25

.cross {
  --oklch-hue: #{color.channel($swatch, "hue", $space: oklch)};
  --rgb-red: #{color.channel($swatch, "red", $space: rgb)};
}

How It Works

  1. Source stays HSL; $space only changes the ruler.
  2. $space: oklch asks for hue after conversion.
  3. $space: rgb asks for the RGB red component.
  4. Same color, different spaces — different numbers.

Example 4 — Contrast Guard from Lightness

Choose text color by reading brand lightness.

SCSS
@use "sass:color";

$brand: #336699;

.button {
  background: $brand;
  color: if(color.channel($brand, "lightness", $space: hsl) > 45%, #111, #fff);
  box-shadow: 0 0 0 4px rgba(
    color.channel($brand, "red"),
    color.channel($brand, "green"),
    color.channel($brand, "blue"),
    0.2
  );
}

How It Works

  1. Hex lives in RGB, so lightness needs $space: hsl.
  2. Lightness is 40% — not greater than 45%, so text is white.
  3. RGB channels feed a soft rgba() ring.
  4. All decisions compile away — no channel call remains in CSS.

Example 5 — channel() vs Older Getters

Same reads, two APIs — useful while upgrading toward 1.79+.

SCSS
@use "sass:color";

$swatch: hsl(80deg 30% 50%);
$ink: #6b717f;

.names {
  --channel-hue: #{color.channel($swatch, "hue")};
  --channel-red: #{color.channel($ink, "red")};

  --getter-hue: #{color.hue($swatch)};
  --getter-red: #{color.red($ink)};
}

How It Works

  1. Same-space reads match between APIs.
  2. Prefer color.channel() on Dart Sass 1.79+.
  3. Older getters remain for projects stuck below 1.79.
  4. One API covers every space, including cross-space $space.

Edge Cases & Pitfalls

Most color.channel bugs are unquoted names, wrong space, or an old Dart Sass.

quotes

Channel name must be quoted

Use "hue", not bare hue. $space stays unquoted (hsl, rgb).

space

Hex has no native lightness

For hex/RGB colors, read lightness with $space: hsl (or convert first).

version

Needs Dart Sass 1.79+

Older compilers report undefined function. Fall back to color.red() / color.hue().

missing

Missing channel → 0

Do not treat 0 as always meaningful. Check with color.is-missing() when it matters.

Toolchain

Sass Support

color.channel is a modern Dart Sass API. Prefer it on 1.79+; use older getters below that.

FeatureStatus
color.channel() / $spaceDart Sass 1.79+
@use "sass:color"Dart Sass 1.23+
color.red() / color.hue() / …Older Dart Sass (and globals)
LibSass / Ruby SassNo color.channel — use global readers if available

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Reader only: returns a number, never a new color.
  • Quote the channel; leave $space unquoted.
  • Dart Sass 1.79+ required for channel and $space.
  • Replace deprecated color.red / blue / alpha readers in new code.

One line: color.channel is the modern way to read any single color dial as a number.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color"
2. Resolve $color (and optional $space)
3. Look up the quoted $channel
4. Return a number (deg / % / unitless)
5. Use that number in if(), rgba(), or CSS vars — then emit CSS

Frequently Asked Questions

color.channel($color, $channel, $space: null) returns the numeric value of one channel. Example: color.channel(hsl(80deg 30% 50%), "hue") is 80deg.
Pass a quoted string such as "red", "hue", "lightness", or "alpha". Unquoted names are not correct for $channel.
color.channel() and its $space argument need Dart Sass 1.79+. On older Dart Sass, use space-specific getters like color.red(), color.hue(), or color.lightness().
Hue in hsl/hwb/lch/oklch returns deg. Saturation, lightness, whiteness, and blackness return %. Other channels (including RGB and alpha) are usually unitless.
Official docs say channel() returns 0 (with an appropriate unit when needed). Use color.is-missing() when you need to detect missing channels explicitly.
channel reads a number. adjust and change return a new color by shifting or replacing channels.

Next: Sass color.complement()

Rotate a color’s hue by 180deg for complementary accents.

color.complement() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.change Function Sass color.complement Function