ui-color

# ui-color

Use this skill when creating or reviewing palettes, contrast, semantic color, dark mode, or chart colors. It adapts Color Expert-style color reasoning into practical UI work.

## Color Roles First

Start with roles before choosing hues:

- `bg`: page background.
- `surface`: panels, rows, cards, inputs.
- `surface-raised`: dialogs, menus, popovers.
- `text`: primary content.
- `text-muted`: metadata and helper text.
- `border`: dividers, input outlines, table rules.
- `accent`: primary action, selection, active state.
- `focus`: visible keyboard focus.
- `danger`, `warning`, `success`, `info`: semantic states.
- `chart-*`: data series, separate from action colors.

Do not use the same accent for primary action, warning, and chart series.

## OKLCH And Perceptual Rules

When authoring new palettes:

- Prefer OKLCH/OKLAB reasoning for even lightness and chroma steps.
- Keep neutral surfaces low-chroma.
- Use accent chroma deliberately; high chroma should be rare in work tools.
- Build light and dark variants by role, not by automatic inversion.
- Keep semantic colors distinct in hue and lightness.

When the codebase uses hex, HSL, RGB, or CSS variables, implement in the local format while preserving the role logic.

## Contrast Rules

Check contrast for:

- Body text on page and panel backgrounds.
- Muted text on surfaces.
- Buttons in default, hover, pressed, and disabled states.
- Inputs, focus rings, and validation messages.
- Table row selection and hover.
- Status chips and alerts.
- Chart labels and legends.

Do not rely on color alone for state. Pair semantic colors with text, icon shape, position, or pattern.

## Palette Construction

For product UI:

- Use 1 primary accent.
- Add at most 1 secondary accent unless data visualization requires more.
- Keep neutral scale broad enough for hierarchy.
- Keep borders visible but quiet.
- Reserve saturated colors for action, selection, and status.

For dashboards:

- Separate categorical chart colors from UI actions.
- Avoid too many similar blues or purples.
- Make critical alerts readable in both color and text.

For brand/editorial pages:

- Color may be more expressive, but the product/place/object must stay inspectable.

## Dark Mode

Dark mode is not inverted light mode:

- Raise surfaces through lightness differences, not heavy shadows.
- Keep text contrast high without pure white everywhere.
- Lower accent chroma if it blooms.
- Re-check semantic colors; red and yellow often need separate dark-mode values.

## Review Output

When reporting color decisions:

- List role tokens.
- Explain accent and semantic usage.
- Note contrast risks.
- Note one-hue or over-saturation risks.
- State whether chart/data colors are separate from action colors.