makeplane/plane · error · Error

Invalid hex color: ${baseColor}

Error message

Invalid hex color: ${baseColor}

What it means

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.

Source

Thrown at packages/utils/src/theme/palette-generator.ts:118

}

/**
 * Generate a 14-shade color palette from a base hex color
 * Works directly in OKLCH space, keeping C and H constant, only varying L
 *
 * @param baseColor - Hex color (with or without #)
 * @param mode - "light" or "dark"
 * @param options - Palette generation options
 * @returns ColorPalette with 14 OKLCH CSS strings
 */
export function generateColorPalette(
  baseColor: string,
  mode: "light" | "dark",
  options: PaletteOptions = {}
): ColorPalette {
  // Validate and normalize input
  if (!validateHexColor(baseColor)) {
    throw new Error(`Invalid hex color: ${baseColor}`);
  }

  const normalizedHex = normalizeHexColor(baseColor);

  // Convert to OKLCH
  const inputOKLCH = hexToOKLCH(normalizedHex);
  const { l: inputL, c: inputC, h: inputH } = inputOKLCH;

  const DEFAULT_LIGHTNESS_MIN = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MIN : DEFAULT_DARK_MODE_LIGHTNESS_MIN;
  const DEFAULT_LIGHTNESS_MAX = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MAX : DEFAULT_DARK_MODE_LIGHTNESS_MAX;

  // Extract options with defaults
  const {
    lightnessMin = DEFAULT_LIGHTNESS_MIN / 100, // Convert to 0-1 scale
    lightnessMax = DEFAULT_LIGHTNESS_MAX / 100, // Convert to 0-1 scale
    valueStop = options.valueStop ?? DEFAULT_VALUE_STOP,
  } = options;

View on GitHub (pinned to 1c8a60f858)

Solutions

1. Convert the input to hex before calling (rgb -> hex, named color -> hex via a library).
2. Constrain the color picker UI to hex output only.
3. Pre-test with validateHexColor and fall back to a known-good default if invalid.

Example fix

// before
generateColorPalette(themeInput, 'light');

// after
import { validateHexColor } from './theme/palette-generator';
const base = validateHexColor(themeInput) ? themeInput : '#3b82f6';
generateColorPalette(base, 'light');

import { validateHexColor } from './theme/palette-generator';
const base = validateHexColor(input) ? input : '#3b82f6';

function isHexColor(v: string): boolean { return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v); }

try { generateColorPalette(input, 'light'); } catch (e) { if (/Invalid hex color/.test((e as Error).message)) { generateColorPalette('#3b82f6', 'light'); } else throw e; }

When it happens

Trigger: generateColorPalette('#GGG123'), generateColorPalette('red'), generateColorPalette('#1234567'), generateColorPalette(''), generateColorPalette(undefined as any).

Common situations: 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.

Related errors

• Invalid valueStop: ${anchorStop}. Must be one of ${SHADE_STO
• Missing required fields.
• Invalid file type. Please select an image.
• Invalid expression: empty or null data
• AND group must contain at least one condition

AI-assisted analysis of makeplane/plane@1c8a60f858 (2026-08-12). Data as JSON: /api/errors/6884a2d656571711. Report an issue: GitHub.