heroui-inc/heroui · warning

[HeroUI ColorSlider] Invalid combination: channel="${channel

Error message

[HeroUI ColorSlider] Invalid combination: channel="${channel}" is not available in RGB color space. Use colorSpace="hsl" or colorSpace="hsb" instead. Auto-correcting to "hsl".

What it means

Hue and saturation channels only exist in HSL/HSB color spaces. If you pass one of those channels together with colorSpace="rgb", ColorSlider warns and auto-corrects the colorSpace to "hsl". The slider still renders, but the effective color space differs from what you specified.

Source

Thrown at packages/react/src/components/color-slider/color-slider.tsx:86

 */
function getValidColorSpace(channel: string, colorSpace?: ColorSpace): ColorSpace | undefined {
  // Check if channel requires a specific color space (e.g., "red" requires "rgb")
  const requiredSpace = CHANNEL_TO_REQUIRED_COLORSPACE[channel];

  if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {
    // eslint-disable-next-line no-console
    console.warn(
      `[HeroUI ColorSlider] Invalid combination: channel="${channel}" requires colorSpace="${requiredSpace}", ` +
        `but received colorSpace="${colorSpace}". Auto-correcting to "${requiredSpace}".`,
    );

    return requiredSpace;
  }

  // Check if channel is HSL/HSB only (hue, saturation) but RGB was specified
  if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === "rgb") {
    // eslint-disable-next-line no-console
    console.warn(
      `[HeroUI ColorSlider] Invalid combination: channel="${channel}" is not available in RGB color space. ` +
        `Use colorSpace="hsl" or colorSpace="hsb" instead. Auto-correcting to "hsl".`,
    );

    return "hsl";
  }

  return colorSpace;
}

/* -------------------------------------------------------------------------------------------------
 * ColorSlider Context
 * -----------------------------------------------------------------------------------------------*/
interface ColorSliderContext {
  channel?: string;
  slots?: ReturnType<typeof colorSliderVariants>;
  state?: ColorSliderRenderProps;
}

View on GitHub (pinned to 7546fff813)

Solutions

1. Use colorSpace="hsl" or "hsb" for hue/saturation channels
2. Keep per-channel colorSpace config rather than a single shared value across heterogeneous sliders
3. Remove the colorSpace prop and let the component infer the correct space for the channel

Example fix

// before
<ColorSlider channel="hue" colorSpace="rgb" />

// after
<ColorSlider channel="hue" colorSpace="hsb" />

const HSL_HSB_CHANNELS = new Set(["hue", "saturation"]);
if (HSL_HSB_CHANNELS.has(channel) && colorSpace === "rgb") {
  colorSpace = "hsl"; // fix before rendering
}

const isHslHsbChannel = (channel: string) =>
  channel === "hue" || channel === "saturation";

When it happens

Trigger: Passing channel="hue" or channel="saturation" (any channel in HSL_HSB_ONLY_CHANNELS) with colorSpace="rgb" to <ColorSlider>.

Common situations: Using an RGB color picker configuration for a hue slider; shared colorSpace state across multiple sliders where one slider uses an HSL/HSB-only channel; migrating configs from another library that allowed rgb hue.

Related errors

• [HeroUI ColorSlider] Invalid combination: channel="${channel
• Ref was not connected to DOM element returned by custom `ren

AI-assisted analysis of heroui-inc/heroui@7546fff813 (2026-08-28). Data as JSON: /api/errors/316c1bb8e42f7241. Report an issue: GitHub.