{"record":{"id":"6884a2d656571711","repo":"makeplane/plane","slug":"invalid-hex-color-basecolor","errorCode":null,"errorMessage":"Invalid hex color: ${baseColor}","messagePattern":"Invalid hex color: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/utils/src/theme/palette-generator.ts","lineNumber":118,"sourceCode":"}\n\n/**\n * Generate a 14-shade color palette from a base hex color\n * Works directly in OKLCH space, keeping C and H constant, only varying L\n *\n * @param baseColor - Hex color (with or without #)\n * @param mode - \"light\" or \"dark\"\n * @param options - Palette generation options\n * @returns ColorPalette with 14 OKLCH CSS strings\n */\nexport function generateColorPalette(\n  baseColor: string,\n  mode: \"light\" | \"dark\",\n  options: PaletteOptions = {}\n): ColorPalette {\n  // Validate and normalize input\n  if (!validateHexColor(baseColor)) {\n    throw new Error(`Invalid hex color: ${baseColor}`);\n  }\n\n  const normalizedHex = normalizeHexColor(baseColor);\n\n  // Convert to OKLCH\n  const inputOKLCH = hexToOKLCH(normalizedHex);\n  const { l: inputL, c: inputC, h: inputH } = inputOKLCH;\n\n  const DEFAULT_LIGHTNESS_MIN = mode === \"light\" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MIN : DEFAULT_DARK_MODE_LIGHTNESS_MIN;\n  const DEFAULT_LIGHTNESS_MAX = mode === \"light\" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MAX : DEFAULT_DARK_MODE_LIGHTNESS_MAX;\n\n  // Extract options with defaults\n  const {\n    lightnessMin = DEFAULT_LIGHTNESS_MIN / 100, // Convert to 0-1 scale\n    lightnessMax = DEFAULT_LIGHTNESS_MAX / 100, // Convert to 0-1 scale\n    valueStop = options.valueStop ?? DEFAULT_VALUE_STOP,\n  } = options;\n","sourceCodeStart":100,"sourceCodeEnd":136,"githubUrl":"https://github.com/makeplane/plane/blob/1c8a60f858d8472aa56e29994ec1c7926da2c6ce/packages/utils/src/theme/palette-generator.ts#L100-L136","documentation":"generateColorPalette validates its baseColor input via validateHexColor before normalizing and converting to OKLCH. The input must be a hex color string (with or without leading #); any value failing that regex/format check is rejected. This is the entry-point guard for the whole palette generator pipeline.","triggerScenarios":"generateColorPalette('#GGG123'), generateColorPalette('red'), generateColorPalette('#1234567'), generateColorPalette(''), generateColorPalette(undefined as any).","commonSituations":"User picks a CSS named color instead of hex; form field allows free text and the user pastes an rgb()/hsl() value; default theme value misconfigured to a non-hex string.","solutions":["Convert the input to hex before calling (rgb -> hex, named color -> hex via a library).","Constrain the color picker UI to hex output only.","Pre-test with validateHexColor and fall back to a known-good default if invalid."],"exampleFix":"// before\ngenerateColorPalette(themeInput, 'light');\n\n// after\nimport { validateHexColor } from './theme/palette-generator';\nconst base = validateHexColor(themeInput) ? themeInput : '#3b82f6';\ngenerateColorPalette(base, 'light');","handlingStrategy":"validation","validationCode":"import { validateHexColor } from './theme/palette-generator';\nconst base = validateHexColor(input) ? input : '#3b82f6';","typeGuard":"function isHexColor(v: string): boolean { return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v); }","tryCatchPattern":"try { generateColorPalette(input, 'light'); } catch (e) { if (/Invalid hex color/.test((e as Error).message)) { generateColorPalette('#3b82f6', 'light'); } else throw e; }","preventionTips":["Constrain color pickers to hex output","Convert rgb/named colors to hex upstream","Boot-test theme config values"],"tags":["theme","color","validation","palette-generator"],"backgroundTag":null,"analyzedSha":"1c8a60f858d8472aa56e29994ec1c7926da2c6ce","analyzedAt":"2026-08-12T14:44:31.636Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}