Skip to main content
Glama

UI State Palette Generator

ui_states
Read-only

Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
brand_hexYesBrand colour hex e.g. '#D4A829'
dark_modeNoGenerate for dark mode (default false)
background_hexNoBackground hex (default #FFFFFF)

Output Schema

TableJSON Schema
NameRequiredDescriptionDefault

No arguments

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed1 schema field changed
    • changedOutput schema / (root)
      Previous value: -nullNew value: +{
      +  "additionalProperties": true,
      +  "description": "Structured JSON response. Shape varies by tool; most return an 'ok' boolean plus a 'result' or 'results' field with the tool's data payload.",
      +  "type": "object"
      +}
  2. Changed1 schema field changed
    • changedOutput schema / (root)
      Previous value: -{
      -  "properties": {
      -    "error": {
      -      "type": "string"
      -    },
      -    "ok": {
      -      "type": "boolean"
      -    },
      -    "result": {
      -      "type": [
      -        "object",
      -        "array",
      -        "string",
      -        "null"
      -      ]
      -    }
      -  },
      -  "type": "object"
      -}New value: +null
  3. Added

TDQS

A4.7/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations only declare readOnlyHint=true, but the description adds substantial behavioral context: it computes colors for contrast against the background, returns hex, contrast ratio, WCAG grade, and usage note per state, and includes CSS custom properties. This goes well beyond the annotation and fully discloses the tool's behavior and outputs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Every sentence earns its place. The description is front-loaded with the core purpose, then lists outputs, explains computation logic, and ends with usage guidance. It is compact yet information-dense, with no filler or redundant repetition of schema details.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity, the description is complete: it covers inputs (brand hex, background, dark mode), outputs (hex, contrast, WCAG grade, usage note, CSS variables), and usage context (before building UI component system). The presence of an output schema reduces the need to explain return structure, but the description still provides a useful overview.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3. The description adds value by explaining that 'all states computed for contrast against your background colour', clarifying the purpose of background_hex, and by stating 'Supports light and dark mode', which maps to dark_mode. It enriches the parameter semantics without over-explaining what the schema already says.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states a specific action ('Generate a complete WCAG-compliant UI state palette') on a specific resource ('from a brand hex'), listing the exact outputs (brand, hover, active, disabled, etc.). This distinguishes it from sibling palette tools like palette_generate and colour_variants, which target broader or different palette generation tasks.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit context: 'Use before building any UI component system.' It also indicates support for light and dark mode, clarifying when the dark_mode parameter is relevant. However, it does not explicitly state when not to use this tool or name alternative tools, so it misses the full 'when-not/alternatives' bar.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources