{"record":{"id":"316c1bb8e42f7241","repo":"heroui-inc/heroui","slug":"heroui-colorslider-invalid-combination-channel-316c1b","errorCode":null,"errorMessage":"[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" is not available in RGB color space. Use colorSpace=\"hsl\" or colorSpace=\"hsb\" instead. Auto-correcting to \"hsl\".","messagePattern":"\\[HeroUI ColorSlider\\] Invalid combination: channel=\"(.+?)\" is not available in RGB color space\\. Use colorSpace=\"hsl\" or colorSpace=\"hsb\" instead\\. Auto-correcting to \"hsl\"\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react/src/components/color-slider/color-slider.tsx","lineNumber":86,"sourceCode":" */\nfunction getValidColorSpace(channel: string, colorSpace?: ColorSpace): ColorSpace | undefined {\n  // Check if channel requires a specific color space (e.g., \"red\" requires \"rgb\")\n  const requiredSpace = CHANNEL_TO_REQUIRED_COLORSPACE[channel];\n\n  if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" requires colorSpace=\"${requiredSpace}\", ` +\n        `but received colorSpace=\"${colorSpace}\". Auto-correcting to \"${requiredSpace}\".`,\n    );\n\n    return requiredSpace;\n  }\n\n  // Check if channel is HSL/HSB only (hue, saturation) but RGB was specified\n  if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === \"rgb\") {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" is not available in RGB color space. ` +\n        `Use colorSpace=\"hsl\" or colorSpace=\"hsb\" instead. Auto-correcting to \"hsl\".`,\n    );\n\n    return \"hsl\";\n  }\n\n  return colorSpace;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ColorSlider Context\n * -----------------------------------------------------------------------------------------------*/\ninterface ColorSliderContext {\n  channel?: string;\n  slots?: ReturnType<typeof colorSliderVariants>;\n  state?: ColorSliderRenderProps;\n}","sourceCodeStart":68,"sourceCodeEnd":104,"githubUrl":"https://github.com/heroui-inc/heroui/blob/7546fff8136f538a2f56a52257c621a5cd616a1d/packages/react/src/components/color-slider/color-slider.tsx#L68-L104","documentation":"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.","triggerScenarios":"Passing channel=\"hue\" or channel=\"saturation\" (any channel in HSL_HSB_ONLY_CHANNELS) with colorSpace=\"rgb\" to <ColorSlider>.","commonSituations":"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.","solutions":["Use colorSpace=\"hsl\" or \"hsb\" for hue/saturation channels","Keep per-channel colorSpace config rather than a single shared value across heterogeneous sliders","Remove the colorSpace prop and let the component infer the correct space for the channel"],"exampleFix":"// before\n<ColorSlider channel=\"hue\" colorSpace=\"rgb\" />\n\n// after\n<ColorSlider channel=\"hue\" colorSpace=\"hsb\" />","handlingStrategy":"validation","validationCode":"const HSL_HSB_CHANNELS = new Set([\"hue\", \"saturation\"]);\nif (HSL_HSB_CHANNELS.has(channel) && colorSpace === \"rgb\") {\n  colorSpace = \"hsl\"; // fix before rendering\n}","typeGuard":"const isHslHsbChannel = (channel: string) =>\n  channel === \"hue\" || channel === \"saturation\";","tryCatchPattern":null,"preventionTips":["Use hsl/hsb colorSpace for hue and saturation sliders","Configure colorSpace per slider, not globally","Omit colorSpace and let the component infer it"],"tags":["color","props-validation","console-warning","color-slider"],"backgroundTag":"invalid-prop-combination-warning","analyzedSha":"7546fff8136f538a2f56a52257c621a5cd616a1d","analyzedAt":"2026-08-28T13:15:49.959Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}