# Add Purposeful Color to Interfaces

Many interfaces feel flat when they rely on gray surfaces and weak accents. This skill helps Claude, Codex, and Claude Code add color with purpose, hierarchy, and accessibility.

## Install

```bash
npx skillstore add pbakaus/colorize
```

## Metadata

- Status: approved
- Slug: pbakaus-colorize
- Skillstore revision: r1
- Version status: missing
- Tree hash: 9b0569728f15c3a7bbcb500ca0d536f8eebf94445e5497f549a9a5cbae8a2593
- Author: pbakaus
- GitHub username: pbakaus
- License: MIT
- Repository: https://github.com/pbakaus/impeccable/tree/main/source/skills/colorize/
- Ref: e397ce5a135369cd6def89cb6400d013e2f68f2f
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/pbakaus-colorize
- Manifest: https://skillstore.pages.dev/api/skills/pbakaus-colorize/manifest

## Capabilities

- Identifies where color can add hierarchy, semantic meaning, wayfinding, and visual warmth.
- Plans a restrained palette with a dominant color, accent colors, and usage rationale.
- Guides semantic colors for success, error, warning, info, status badges, and progress indicators.
- Applies color to buttons, links, icons, backgrounds, surfaces, borders, typography, and charts.
- Checks contrast, color vision accessibility, consistent meanings, and balanced color distribution.

## Use Cases

- Revive a Grayscale Dashboard: Add semantic status colors, chart colors, and action emphasis without making the dashboard noisy.
- Plan a Product Color System: Define where brand colors, accent colors, and neutral tints should appear across a feature.
- Improve Design Token Usage: Review color roles and replace arbitrary values with a consistent, accessible palette.

## Prompt Templates

### Colorize a Component

```
Use the colorize skill on this component. Keep the palette restrained and explain where each color adds meaning.
```

### Create a Semantic Palette

```
Use the colorize skill to define success, error, warning, info, and neutral colors for this feature.
```

### Refresh a Product Area

```
Use the colorize skill across this product area. Preserve brand fit, improve hierarchy, and avoid random decoration.
```

### Audit and Refine Color Strategy

```
Use the colorize skill to audit current color usage, identify inconsistencies, and propose accessible design token updates.
```

## Limitations

- It provides design guidance, not a standalone color engine or visual testing tool.
- It depends on existing brand colors, product context, or user-provided design direction.
- It may require a companion frontend design workflow before implementation starts.
- It cannot guarantee WCAG compliance without testing the rendered interface.

## Best Practices

- Start from existing brand colors before adding new accents.
- Use bright color mainly for important actions, states, and navigation cues.
- Validate text contrast and avoid relying on color alone.

## Anti Patterns

- Adding many unrelated colors to make a screen feel lively.
- Using color without semantic meaning or hierarchy.
- Applying pure black or pure white across large interface areas.

## Security Audit

- Audited at: 2026-07-06T20:03:23.678\+00:00
- Summary: The static findings are false positives from Markdown inline color values and design assessment wording. No executable commands, host reconnaissance, data collection, or prompt injection attempts were found in SKILL.md.

## Stats

- Views: 113
- Downloads: 14
- Favorites: 0
- Popularity score: 0