hermes

Create an accessible colour palette

Creates a brand colour palette with roles (primary, accents, neutrals, status), tonal scales and computed text-contrast results for every pairing. Use when building a brand or product colour system.

context

Generated palettes often look good as swatches and fail in use: the brand colour cannot carry white text, there is no neutral scale for real interfaces, status colours clash with the brand, and contrast is claimed rather than computed. A usable palette gives every colour a job, provides enough tints and shades to build interfaces and layouts, and shows the contrast of each text pairing with real numbers.

task

Create a colour palette for this brand.

brand personality

Only if [BASE_COLORS] is given:

base colors

If no base colours were given, choose them from the personality and explain the choice. If base colours were given, keep them exactly; adjust only the colours you add.

  1. Direction: translate the personality into a colour direction (hue family, saturation, lightness, warm or cool neutrals) in 2 to 3 sentences, noting any colour conventions in the industry or audience to follow or avoid.
  2. Roles: define primary, 1 to 2 accents, neutrals (slightly tinted towards the primary hue unless a pure grey is wanted), and status colours: success, warning, danger, info. Status colours must be distinguishable from the brand colours and from each other, and the brand colour must not double as a status colour (a red brand needs a danger red that reads differently, or a second cue).
  3. Scales: build a 10-step tonal scale (50 to 900) for the primary and the neutral, and for each status colour the 3 steps an interface needs: a tinted background, a border or icon step, and a text step. Space steps evenly in perceived lightness: give the target OKLCH lightness for each step (for example 0.97 at 50 down to 0.25 at 900) with hue held steady and chroma reduced at the extremes, then the hex value. Hex values converted by hand are approximate; say so once and tell the user to regenerate the ramp in an OKLCH tool from the listed lightness, hue and chroma targets.
  4. Contrast: compute the WCAG 2 contrast ratio for the 8 to 12 text pairings the usage rules actually recommend: body and secondary text on each background, text on the primary button, the link colour on the background, and each status text step on its tinted background. Use relative luminance from linearised sRGB (channel c/255; if at most 0.04045 divide by 12.92, else ((c + 0.055) / 1.055) ^ 2.4; L = 0.2126 R + 0.7152 G + 0.0722 B) and ratio = (L1 + 0.05) / (L2 + 0.05). Show both luminance values so the result can be checked, and truncate the ratio to two decimals. Mark each pass or fail against 4.5:1 for normal text, 3:1 for large text and UI components.
  5. Fix failures by choosing a darker or lighter step from the same scale, not by changing the hue. If the given brand colour itself fails as a button background with white text, keep it for large elements and accents and name the darker step to use behind text.
  6. Usage rules: proportions (for example mostly neutrals, primary for actions and key moments, accents sparingly), which step to use for text, backgrounds, borders and hover, and what never to do (such as status red for decoration).
  7. Colour-vision check: say where the palette relies on red versus green or other confusable pairs, and require a second cue (icon, label, pattern) there.
  8. If the personality is too vague to pick a direction ("nice colours"), ask 2 to 3 questions about audience, feeling and competitors, then stop.
constraints
  • Show computed ratios. If you cannot compute reliably, say so and mark the pair "to verify" instead of guessing.
  • Never round a ratio up to a pass (4.47 is a fail).
  • Do not describe colours with emotional claims as fact ("blue builds trust"); call them associations that vary by culture.
  • Separate what you verified from what you inferred. Mark inferences as such.
  • When you do not know, say "I don't know" once and state what would settle it.
output format

Direction

Palette

| Role | Name | Hex | Use |

Scales

Primary and neutral: | Step | OKLCH target (L, C, H) | Hex (approx.) | Typical use | Status colours: | Status | Background | Border or icon | Text |

Contrast

| Foreground | Background | L1 / L2 | Ratio | Normal text | Large text and UI |

Usage rules

Notes

Assumptions, colour-vision notes, and pairs still to verify.

1 required value still a placeholder; the assistant will ask for it.

details

kind
Prompt: a task you run by name to get one finished thing back
domain
Design
category
Graphic design
level
Intermediate
made for
Product / UX / UI designer, Graphic designer, Founder / business owner, Frontend engineer
risk
read-only
version
v1.0.0 · incubating
reviewed
2026-10-02
works in
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install create-color-palette --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill create-color-palette -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the design plugin
claude plugin install hodios-design@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of Graphic design
PromptAccessibility

Review colour contrast and fix the palette

Checks colour pairs or design tokens against contrast requirements and proposes the nearest passing alternatives that keep the brand hue. Use when defining or auditing a palette or theme.

review-color-contrast
PromptDesign systems

Define a design token architecture

Designs a three-tier design token architecture (primitive, semantic, component) with naming conventions, theming rules and a sample token file. Use when starting or restructuring a design system.

define-design-tokens
PromptGraphic design

Pair typefaces for a brand

Suggests typeface pairings with rationale, roles, weights, a starter type scale, fallbacks and licensing notes. Use when choosing fonts for a brand, site or publication.

pair-typefaces
PersonaGraphic design

Art director

Art director who guards the concept, gives clear visual direction across photography, type and layout, and critiques work against the brief. Use as a creative lead for visual projects.

art-director
PromptGraphic design

Create a written mood board

Builds a written mood board for a design project - visual direction, palette, typography, textures, photography style, reference searches and what to avoid - ready to assemble and share.

create-mood-board
PromptGraphic design

Critique a graphic design

Gives structured, prioritised feedback on a poster, social graphic, slide or layout covering purpose, hierarchy, typography, colour, composition and production. Use before finalising a design.

critique-graphic-design