Budibase/budibase · error

Color is invalid.

Error message

Color is invalid.

What it means

normaliseSafeCssColor in packages/shared-core/src/helpers/colors.ts trims a color string and throws "Color is invalid." if it contains a semicolon or a url( pattern. This is an anti-injection guard: since the value is used in CSS, semicolons could terminate a declaration and inject extra CSS, and url() could load external resources, so such inputs are rejected rather than sanitised.

Source

Thrown at packages/shared-core/src/helpers/colors.ts:7

export const normaliseSafeCssColor = (color?: string) => {
  if (color == null || color.trim() === "") {
    return undefined
  }
  const trimmed = color.trim()
  if (trimmed.includes(";") || /\burl\s*\(/i.test(trimmed)) {
    throw new Error("Color is invalid.")
  }
  return trimmed
}

View on GitHub (pinned to a81a902e9a)

Solutions

1. Pass only a single CSS color value (hex, rgb(), hsl(), or named color) without any semicolons.
2. Strip/validate user input on your side before assigning it to the color property.
3. If multiple declarations were intended, split them and use only the color portion.
4. Use the library's color picker UI rather than free-text where possible.

Example fix

// before
const color = normaliseSafeCssColor("#ff0000; border: 1px")
// after
const color = normaliseSafeCssColor("#ff0000")

function safeColor(input?: string): string | undefined {
  if (input == null || !input.trim()) return undefined
  const t = input.trim()
  if (t.includes(";") || /\burl\s*\(/i.test(t)) return undefined
  return t
}
const color = safeColor(userColor) ?? "#000000"

function isSafeCssColor(v: unknown): v is string {
  return typeof v === "string" && v.trim() !== "" &&
    !v.includes(";") && !/\burl\s*\(/i.test(v)
}

let color: string | undefined
try {
  color = normaliseSafeCssColor(userColor)
} catch {
  color = undefined // falls back to default theme color
}

When it happens

Trigger: Passing a user-supplied color like "red; background:url(evil)" or any string containing ";" or "url(" to helpers/components that normalise CSS colors, e.g. theming or chart color configuration.

Common situations: End users pasting multi-part CSS into a color field in the builder; API/automation values carrying CSS shorthand; copy-pasted CSS values like "rgb(0,0,0); opacity:0.5".

Related errors

• Invalid object store key: path traversal is not allowed.
• Only HTTP(S) URLs are allowed.
• Only HTTP(S) URLs are allowed for query import
• Import url must not contain credentials
• File "${fileName}" has an invalid extension: "${extension}"

AI-assisted analysis of Budibase/budibase@a81a902e9a (2026-08-29). Data as JSON: /api/errors/51f943d2fa384e00. Report an issue: GitHub.