Colors

Complete brand color system with palette, buttons, pairings, dark mode, and accessibility.

Properties

primary_palettePaletteColor[]

Brand colors sorted by category, then by usage within each category (most used first).

namestring

Color name (e.g., "Midnight Blue")

hexstring

Hex color value

Example: "#1a2b3c"

rgbastring

RGBA color value

hslstring | null

HSL color value

cmykstring | null

CMYK color value, e.g. "C:0 M:100 Y:80 K:16".

usagestring

Where this color appears

category"primary" | "secondary" | "supporting" | "accent" | "neutral"

color_groupstring

Hue-family label (e.g. "red", "teal", "neutral"). Entries in the same family share the same label so the UI can group them visually.

usage_frequencynumber

0–100 scale indicating how often this color is used.

recommended_usage_percentstring

Recommended usage share, e.g. "40-50".

accessibilityobject | null

Accessibility flags derived from the hex value.

is_darkboolean

is_lightboolean

gradientsBrandGradient[]

Brand-meaningful gradients (linear, radial, or conic). Empty if the brand does not use signature gradients.

namestring

Gradient name.

cssstring

Full CSS gradient definition, paste-ready into `background:`.

Example: "linear-gradient(135deg, #635BFF 0%, #00D4FF 100%)"

usagestring

Prescriptive usage guidance.

design_notesstring

Overall observations about the color system and brand personality.

Example

example.json

{
  "primary_palette": [
    {
      "name": "string",
      "hex": "#1a2b3c",
      "rgba": "string",
      "hsl": null,
      "cmyk": null,
      "usage": "string",
      "category": "primary",
      "color_group": "string",
      "usage_frequency": 0,
      "recommended_usage_percent": "string",
      "accessibility": {
        "is_dark": true,
        "is_light": true
      }
    }
  ],
  "gradients": [
    {
      "name": "string",
      "css": "linear-gradient(135deg, #635BFF 0%, #00D4FF 100%)",
      "usage": "string"
    }
  ],
  "design_notes": "string"
}