# Color Palette

> Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.

- **Type:** Skill
- **Install:** `agentstack add skill-jezweb-claude-skills-color-palette`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jezweb](https://agentstack.voostack.com/s/jezweb)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jezweb](https://github.com/jezweb)
- **Source:** https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/color-palette
- **Website:** https://jezweb.com.au

## Install

```sh
agentstack add skill-jezweb-claude-skills-color-palette
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Colour Palette Generator

Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.

## Workflow

### Step 1: Get the Brand Hex

Ask for the primary brand colour. A single hex like `#0D9488` is enough.

### Step 2: Generate 11-Shade Scale

Convert hex to HSL, then generate shades by varying lightness while keeping hue constant.

#### Hex to HSL Conversion

```javascript
function hexToHSL(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;

  let l = (max + min) / 2;
  let s = 0;
  if (diff !== 0) {
    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
  }

  let h = 0;
  if (diff !== 0) {
    if (max === r) h = ((g - b) / diff + (g =18px or >=14px bold) | 3:1 | 4.5:1 |
| UI components (buttons, borders) | 3:1 | Not defined |
| Graphical objects (icons, charts) | 3:1 | Not defined |

Target AA for most projects, AAA for high-accessibility needs (government, healthcare).

#### Luminance and Contrast Formulas

```javascript
function getLuminance(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  const rsRGB = r Click me

// Secondary button
Cancel

// Card

  Title
  Description

// Input

```

---

## Common Adjustments

- **Too vibrant at light shades**: Reduce saturation by 10-20%
- **Poor contrast on primary**: Use shade 700+ for text
- **Dark mode too dark**: Use shade 900 instead of 950 for backgrounds
- **Brand colour too light/dark**: Adjust to shade 500-600 range
- **Dark mode looks washed out**: Use shade 500 for primary (brighter than light mode's 600)
- **Pure white text too harsh in dark mode**: Use shade 50 (off-white) instead
- **Dark mode muted text fails contrast**: Use more extreme shades (300 on 900 instead of 400 on 800)

### Brand Identity Adjustments

- **Conservative brands** (finance, law): Use primary-700 for buttons, reduce saturation in light shades
- **Vibrant brands** (creative, tech): Use primary-500-600, keep full saturation
- **Minimal brands** (design, architecture): Use primary sparingly, emphasise muted tones, subtle borders (primary-100)

---

## Verification Checklist

- [ ] Body text: >=4.5:1 (normal) or >=3:1 (large)
- [ ] Primary button text: >=4.5:1
- [ ] Secondary button text: >=4.5:1
- [ ] Muted text: >=4.5:1
- [ ] Links: >=4.5:1 (or underlined)
- [ ] UI elements (borders): >=3:1
- [ ] Focus indicators: >=3:1
- [ ] Error text: >=4.5:1
- [ ] Dark mode: All above checks pass
- [ ] Every background has a foreground pair
- [ ] Brand colour recognisable in both modes
- [ ] Borders visible but not harsh
- [ ] Cards/sections have clear boundaries

**Test both modes before shipping.**

---

## Optional References

- **Online contrast checkers**: WebAIM (webaim.org/resources/contrastchecker), Coolors (coolors.co/contrast-checker), Accessible Colors (accessible-colors.com)
- **CI/CD contrast tests**: Use `getContrastRatio()` in test suites to assert minimum ratios for all token pairs
- **Transparent/gradient edge cases**: For colours with opacity, calculate against final rendered colour. For gradients, check both endpoints.
- **OLED dark mode**: Use `@media (prefers-contrast: high)` with `#000000` background for battery savings on AMOLED screens
- **Multi-colour palettes**: Generate separate shade scales for each brand colour, map to different semantic roles (primary, accent)
- **Palette visualisation tools**: coolors.co, paletton.com, Figma swatches
- `assets/tailwind-colors.css` — Complete CSS output template

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [jezweb](https://github.com/jezweb)
- **Source:** [jezweb/claude-skills](https://github.com/jezweb/claude-skills)
- **License:** MIT
- **Homepage:** https://jezweb.com.au

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jezweb-claude-skills-color-palette
- Seller: https://agentstack.voostack.com/s/jezweb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.