A skill that makes Claude build a colour palette the way a senior designer does, one stage at a time, with you choosing at each fork. It reads your logo file or brand guide for exact values, samples your photos with code rather than guessing by eye, and turns mood words into decisions about lightness, saturation and hue. It shows three directions as swatch images, gives every colour a job and a share of the surface, and works out HEX, RGB, HSL and OKLCH values with tints and shades in eleven steps. Then it checks every text and button pair against WCAG 2.2 and hands over a swatch sheet, an Adobe swatch file, CSS, a Tailwind theme and JSON.
Inside are five reference files. One holds tested code for sampling, conversion, ramps, contrast, a colour blindness check, CMYK through a printer's profile and the export files. One holds the WCAG, legal, print and software facts, each with its source and the date it was checked. The others cover reading a logo or a photo, making three directions that differ, roles and usage ratios, and a full worked example for an invented coffee roaster. Claude ends each stage with one question. It never reads a hex off a picture by eye, never states a ratio it has not calculated, and never changes a locked brand colour to make a pair pass.
It needs code execution switched on, because every value and file depends on it. Without it, Claude can talk through directions but marks the numbers as still to compute. It cannot see how ink will sit on your paper, so CMYK builds come from your printer's ICC profile and get approved on a printed proof, and it will not name a Pantone match from memory. A photo gives mood, not a specification. Passing contrast does not make a product accessible on its own. Bring an SVG logo or the codes from your guide rather than a screenshot, say where the colours will be used, and have the printer's profile to hand if anything prints.
Claude skill · version 1.0
Colour palette
Checking your access.
In the download · 9 files
- SKILL.mdThe method Claude follows: six stages from inputs to three directions, roles and ratios, values and ramps, computed contrast and colour vision, then print advice and the handover files.
- README.mdHow to install it in claude.ai or Claude Code, how to start, and the licence.
- references/sources-and-directions.mdHow to read a logo, a brand guide, a photo or mood words, tested code to sample photos and logos, and how to make three directions that really differ.
- references/worked-example.mdA full run for an invented coffee roaster: inputs, three directions, roles, ramps, 20 contrast pairs, colour vision flags and CMYK builds, every value computed.
- references/roles-and-ratios.mdRoles, tinted neutrals, state colours, usage ratios by application, code to measure ratios in real layouts, rules of use and dark mode basics.
- references/color-math.mdTested code for HEX, RGB, HSL and OKLCH, anchored 11-step ramps, WCAG contrast, colour blindness simulation, CMYK through an ICC profile, and the ASE, CSS, Tailwind, JSON and swatch sheet files.
Install it and begin
01Install it in Claude CodeTerminal mkdir -p ~/.claude/skillsunzip ~/Downloads/color-palette.zip -d ~/.claude/skills/# Start it with /color-palette. If this is your first skill, type /reload-skills once.On claude.ai there is nothing to unzip: upload the zip as it is. Every step is on Install and use a Claude skill.
02Your first message to ClaudeText Use the colour palette skill. I need a palette for [BRAND OR PROJECT NAME], used on [WHERE, FOR EXAMPLE OUR SITE AND PRINTED LABELS]. The feel is [THREE OR FOUR MOOD WORDS]. Our fixed colours are [HEX CODES, OR NONE]. Start with the inputs and tell me what is missing.Attach an SVG logo, your brand guide PDF or a photo, and switch on code execution first. If anything will be printed, ask your printer which ICC profile they use and for the file.
Worked example
How the skill builds a palette
- 01Read exact values first, from the SVG logo's fills or the brand guide's codes. Sample photos with code and label every result as sampled.A colour read by eye from a picture is a guess, and white balance and compression have already moved every pixel.
- 02Show three directions as swatch images with a ratio bar, differing in lightness structure and saturation as well as hue.Three versions of one idea in different accents waste the only real choice you get.
- 03Give every colour one job and a share of the surface for each place it is used: site, packaging, social, print.Without ratios a palette drifts towards whatever the last designer liked, and an accent above about 10% stops being an accent.
- 04Build tints and shades from 50 to 950 in OKLCH, with the brand value kept exact at its own step.Equal steps in OKLCH look equal, so step 600 reliably carries text where steps made in HSL do not.
- 05Compute every text and button pair against WCAG 2.2, cut to two decimals, and fix failures by moving colours between roles.In the worked example a copper passes on white at 4.51 and fails on the cream background at 4.00. Only arithmetic catches that.
- 06Simulate colour blindness for every pair that must be told apart, and add an icon or a word wherever two collapse.About 1 in 12 men have a colour vision deficiency, most often confusing red and green.
- 07Convert to CMYK with the printer's own ICC profile and approve the colours on a printed proof.A quick conversion of the example's green gave C66 M0 Y25 K64. The uncoated print profile gave C82 M18 Y65 K49.
What to do it with
- ClaudeFree tier, paid above it
A language model that writes, edits, reads long documents and runs tools, including agents that work inside a codebase.
Bad at It is agreeable by default, so it will improve a bad idea instead of telling you it is bad. Ask it to argue against you and the quality of the answer changes.
- Claude CodeSubscription
An agent that reads a whole repository, edits files, runs the tests and explains what it changed.
Bad at It is fast enough to make a large mistake quickly. Work on a branch, read the diff, and never let it push. Watch the starting mode: on Pro, Max and Team plans it opens in auto mode, which Anthropic's own list says may read a .env file and send the key in it to the API that key belongs to. Switch it off.
- CoolorsFree tier, paid above it
Generates and locks palettes quickly, with contrast checking and export.
Bad at Its random generator produces palettes that all share a family resemblance, and that family is now visible across a lot of new brands.
- Tailwind CSSOpen weights or open source
Styling by composing small classes, which makes a design system enforceable in the markup.
Bad at It pulls teams towards its default scale, and its defaults are now visible on a great many sites.
- IllustratorSubscription
Vector drawing, where logos and dielines are actually built.
Bad at Its generative vector features produce shapes that look right and have terrible point structure underneath.
- InDesignSubscription
Long documents, grids, parent pages and print-ready output.
Bad at Its AI makes pictures and words, not layouts, and Generative Expand has handled linked images and colour profiles badly.
- ProcreateSubscription
Drawing and painting on the iPad, bought once (Rs 999 on Apple's App Store in India, October 2026).
Bad at It works in pixels only, so a brand's line work has to be redrawn in vector before it scales.
Why it matters
Ask a chat for a palette and you get five hex codes named primary to accent, a contrast claim nobody calculated, a copper that passes on white but fails on your cream background, and a CMYK conversion that would print a different green. This skill makes Claude sample and compute instead of guessing, give every colour a job and a share, keep your brand colour exact, and say plainly what only a printed proof can settle.
- Type
- technique
- Period
- ongoing