heroui-inc/heroui · warning

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

Error message

[HeroUI ColorSlider] Invalid combination: channel="${channel}" requires colorSpace="${requiredSpace}", but received colorSpace="${colorSpace}". Auto-correcting to "${requiredSpace}".

What it means

ColorSlider validates its channel/colorSpace prop combination. Some channels (e.g. "red", "green", "blue") only exist in a specific color space ("rgb"); if you pass a mismatched colorSpace, the component logs a console warning and auto-corrects the colorSpace to the one the channel requires. This is a soft warning, not a thrown error.

Source

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

  blue: "rgb",
  lightness: "hsl",
  brightness: "hsb",
};

/** Channels that only work with HSL or HSB (not RGB) */
const HSL_HSB_ONLY_CHANNELS = new Set(["hue", "saturation"]);

/**
 * Validates and returns a valid colorSpace for the given channel.
 * If an invalid combination is detected, logs a warning and returns the correct colorSpace.
 */
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";
  }

View on GitHub (pinned to 7546fff813)

Solutions

1. Set colorSpace to the space the channel requires (e.g. channel="red" → colorSpace="rgb")
2. Derive colorSpace from the channel via a lookup table instead of hardcoding both
3. If you need hsb/hsl behavior, use a channel that belongs to that space (hue, saturation, brightness)

Example fix

// before
<ColorSlider channel="red" colorSpace="hsb" defaultValue="#f00" />

// after
<ColorSlider channel="red" colorSpace="rgb" defaultValue="#f00" />

const CHANNEL_SPACE: Record<string, ColorSpace> = {
  red: "rgb", green: "rgb", blue: "rgb",
  hue: "hsb", saturation: "hsb", brightness: "hsb",
};
const space = CHANNEL_SPACE[channel] ?? colorSpace;
<ColorSlider channel={channel} colorSpace={space} />;

const isValidChannelSpace = (channel: string, space?: ColorSpace) =>
  !space || !CHANNEL_SPACE[channel] || CHANNEL_SPACE[channel] === space;

When it happens

Trigger: Passing channel="red" with colorSpace="hsb" (or any non-rgb space) to <ColorSlider>; generally any channel in CHANNEL_TO_REQUIRED_COLORSPACE combined with a different colorSpace prop.

Common situations: Copy-pasting slider configs between hue/saturation sliders and RGB sliders; dynamically generating channel props without constraining colorSpace; upgrading from a version that silently ignored the mismatch.

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/52c5af7f5baa25dc. Report an issue: GitHub.