Sass color.channel() Function

What You’ll Learn

color.channel() belongs to the built-in sass:color module. It reads one channel from a color and returns a number—hue, lightness, red, alpha, and more—at compile time. This page covers quoted channel names, return units, optional $space, how it relates to older getters like color.red() / color.hue(), and five examples (Dart Sass 1.79+).

What Is color.channel()?

Channel means “open this color and tell me one dial’s current number.” Unlike adjust / change / scale, it does not return a new color—it returns a number you can compare, interpolate, or feed into other Sass math.

• color.channel(hsl(80deg 30% 50%), "hue") → 80deg
• color.channel(#6b717f, "red") → 107
• color.channel(hsl(80deg 30% 50%), "red", $space: rgb) → 140.25

📝 Syntax

Load the color module, then pass the color, a quoted channel name, and an optional space:

@use "sass:color";

// Dart Sass 1.79+
color.channel($color, $channel, $space: null)

Parameters

Return value

📦 Loading sass:color

There is no separate global channel() built-in like adjust-color / change-color. Use the module form on Dart Sass 1.79+.

// Recommended — namespaced (Dart Sass 1.79+)
@use "sass:color";
$h: color.channel(hsl(80deg 30% 50%), "hue");

// Optional — bring members into the current namespace
@use "sass:color" as *;
$h: channel(hsl(80deg 30% 50%), "hue");

// Optional — custom namespace
@use "sass:color" as c;
$h: c.channel(hsl(80deg 30% 50%), "hue");

🎨 Common Channel Names

Official docs require a quoted string for $channel. Here are the names beginners use most often:

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives numbers or finished colors—no color.channel() call remains.

Examples Gallery

Examples target Dart Sass 1.79+. Open View Compiled CSS to see the numbers Sass emits into custom properties or rules.

@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")};
}

.token {
  --hue: 80deg;
  --sat: 30%;
  --light: 50%;
}

@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")};
}

.channels {
  --red: 107;
  --green: 113;
  --blue: 127;
  --alpha: 1;
}

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

.cross {
  --oklch-hue: 124.279238779deg;
  --rgb-red: 140.25;
}

@use "sass:color";

$brand: #336699;

.button {
  background: $brand;
  // Lightness of #336699 is 40% — pick light text
  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
  );
}

.button {
  background: #336699;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(51, 102, 153, 0.2);
}

@use "sass:color";

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

.names {
  // Modern unified reader (1.79+)
  --channel-hue: #{color.channel($swatch, "hue")};
  --channel-red: #{color.channel($ink, "red")};

  // Older space-specific getters (widely available)
  --getter-hue: #{color.hue($swatch)};
  --getter-red: #{color.red($ink)};
}

.names {
  --channel-hue: 80deg;
  --channel-red: 107;
  --getter-hue: 80deg;
  --getter-red: 107;
}

🚀 Real-World Use Cases

• Contrast helpers — pick black or white text from lightness.
• Design tokens — expose hue / saturation / alpha as CSS custom properties.
• Conditional themes — branch mixins when saturation is below a threshold.
• Rebuild colors — feed RGB channels into rgba() or other constructors.
• Cross-space debugging — print oklch hue for a hex brand color during migration.
• API cleanup — replace many color.red/hue calls with one reader.

⚠️ Common Pitfalls

• Unquoted channel names — use "hue", not bare hue, for $channel.
• Old Dart Sass — color.channel needs 1.79+; otherwise use color.red() / color.hue().
• Expecting a color — channel returns a number; mutators return colors.
• Wrong space — hex defaults to RGB, so "lightness" needs $space: hsl; HSL colors need $space: rgb to read "red".
• Missing channels look like zero — use color.is-missing() when zero is ambiguous.

💡 Best Practices