UI State Palette Generator
ui_statesGenerate WCAG-compliant UI state colors from a brand hex. Computes hover, active, disabled, and other states with contrast ratios and CSS custom properties for light and dark mode.
Instructions
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
| Name | Required | Description | Default |
|---|---|---|---|
| brand_hex | Yes | Brand colour hex e.g. '#D4A829' | |
| background_hex | No | Background hex (default #FFFFFF) | |
| dark_mode | No | Generate for dark mode (default false) |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| ok | No | ||
| result | No | ||
| error | No |