Colors

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

Properties

primary_palettePaletteColor[]

Primary colors sorted by usage frequency

namestring

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

hexstring

Hex color value

Example: "#1a2b3c"

rgbastring

RGBA color value

hslstring

HSL color value

usagestring

Where this color appears

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

usage_frequencynumber

0–100 scale indicating how often this color is used

contextsstring[]

Where on the page this color appears

is_gradientboolean

gradient_definitionstring

CSS gradient definition (if is_gradient is true)

recommended_usage_percentstring

Recommended usage percentage (e.g., "55-65")

button_colorsobject[]

Button color variants (Primary, Secondary, Ghost, etc.)

labelstring

background_hexstring

background_rgbastring

text_hexstring

text_rgbastring

border_hexstring

border_rgbastring

hover_background_hexstring

hover_background_rgbastring

usagestring

accessibilityAccessibilityMetrics

WCAG accessibility metrics for a color pairing

contrast_rationumber

Contrast ratio (1–21)

wcag_aaboolean

Meets WCAG AA standard

wcag_aaaboolean

Meets WCAG AAA standard

wcag_large_text_aaboolean

Meets WCAG AA for large text

supporting_colorsobject[]

Grays, whites, blacks, and other neutrals

namestring

hexstring

rgbastring

hslstring

usagestring

color_pairingsobject[]

Effective foreground/background color combinations

foreground_hexstring

background_hexstring

usagestring

accessibilityAccessibilityMetrics

WCAG accessibility metrics for a color pairing

contrast_rationumber

Contrast ratio (1–21)

wcag_aaboolean

Meets WCAG AA standard

wcag_aaaboolean

Meets WCAG AAA standard

wcag_large_text_aaboolean

Meets WCAG AA for large text

recommendedboolean

dark_modeobject

Dark mode color analysis

detected"yes" | "no" | "partial"

generatedboolean

Whether dark mode colors were synthesized vs extracted

dark_mode_colorsobject[]

namestring

hexstring

rgbastring

hslstring

usagestring

light_mode_equivalentstring

usage_guidelinesstring[]

Best-practice guidelines for applying the color system

design_notesstring

Overall observations about the color system

accessibilityobject

Top-level accessibility summary

overall_score"good" | "needs_improvement" | "poor"

recommendationsstring[]

contrast_issuesobject[]

typestring

elementstring

foreground_hexstring

background_hexstring

contrast_rationumber

meets_wcag_aaboolean

recommendationstring

Example

example.json

{
  "primary_palette": [
    {
      "name": "string",
      "hex": "#1a2b3c",
      "rgba": "string",
      "hsl": "string",
      "usage": "string",
      "category": "primary",
      "usage_frequency": 0,
      "contexts": [
        "string"
      ],
      "is_gradient": true,
      "gradient_definition": "string",
      "recommended_usage_percent": "string"
    }
  ],
  "button_colors": [
    {
      "label": "string",
      "background_hex": "string",
      "background_rgba": "string",
      "text_hex": "string",
      "text_rgba": "string",
      "border_hex": "string",
      "border_rgba": "string",
      "hover_background_hex": "string",
      "hover_background_rgba": "string",
      "usage": "string",
      "accessibility": {
        "contrast_ratio": 0,
        "wcag_aa": true,
        "wcag_aaa": true,
        "wcag_large_text_aa": true
      }
    }
  ],
  "supporting_colors": [
    {
      "name": "string",
      "hex": "string",
      "rgba": "string",
      "hsl": "string",
      "usage": "string"
    }
  ],
  "color_pairings": [
    {
      "foreground_hex": "string",
      "background_hex": "string",
      "usage": "string",
      "accessibility": "...",
      "recommended": true
    }
  ],
  "dark_mode": {
    "detected": "yes",
    "generated": true,
    "dark_mode_colors": [
      {
        "name": "string",
        "hex": "string",
        "rgba": "string",
        "hsl": "string",
        "usage": "string",
        "light_mode_equivalent": "string"
      }
    ]
  },
  "usage_guidelines": [
    "string"
  ],
  "design_notes": "string",
  "accessibility": {
    "overall_score": "good",
    "recommendations": [
      "string"
    ],
    "contrast_issues": [
      {
        "type": "string",
        "element": "string",
        "foreground_hex": "string",
        "background_hex": "string",
        "contrast_ratio": 0,
        "meets_wcag_aa": true,
        "recommendation": "string"
      }
    ]
  }
}