Build a color palette generator that checks every text and background pair
Most palette tools produce five pretty swatches and leave you to discover that white text fails on three of them. A useful color palette generator works in roles (background, text, action, accents) and checks contrast between every text and background pair as you go. Anticode can build one as a browser app that runs those checks itself.
Generate roles, not swatches
A website or app needs colours with jobs. Ask your palette maker to produce these roles, and to generate the others from one or two you choose:
- Background and surface
- The page and the cards or panels on it, a step apart.
- Text and muted text
- Body text with strong contrast; a quieter shade for captions and labels that still passes.
- Action
- The one colour for buttons and links. Anticode's own design systems hold each site to a single action colour, which keeps what's clickable obvious.
- Accent
- One or two for charts, tags and illustration, used sparingly.
- States
- Success, warning and error, checked against the background like everything else.
For each role, generate a scale of tints and shades (often ten steps from very light to very dark). Generating in a perceptual colour space such as OKLCH gives steps that look evenly spaced, which plain RGB mixing doesn't. Modern browsers understand OKLCH in CSS, so the app can work in it directly.
Contrast checks on every pair
The Web Content Accessibility Guidelines set minimum contrast ratios: 4.5 to 1 for normal text and 3 to 1 for large text and for interface parts such as input borders (WCAG 2.2). A good colour scheme generator calculates the ratio for each pairing that will actually occur and shows a pass or fail beside it:
| Foreground | Background | Minimum |
|---|---|---|
| Body text | Background and surface | 4.5:1 |
| Muted text | Background and surface | 4.5:1 |
| Button label | Action colour | 4.5:1 |
| Action colour as a link | Background | 4.5:1 |
| Input border, focus ring | Background | 3:1 |
| Large headings | Background | 3:1 |
When a pair fails, offer the nearest shade that passes rather than just a red cross. Ask for a dark mode version of the palette checked the same way; a palette that works in light mode often fails in dark.
Avoiding the AI look
Anticode's design gate refuses to publish pages with the purple-to-blue gradient that has become a signature of machine-made sites, and its design systems work to one action colour. Your generator can carry the same taste: a warning when the palette drifts to that gradient, or when there are three competing accent colours fighting for attention. A brand colour picker that starts from your logo's colour (typed in as a hex value) and builds neutrals with a hint of it tends to look deliberate.
Describing it to Anticode
"A color palette generator for web designers. Start from one or two hex colours or a random seed. Generate roles: background, surface, text, muted text, action, two accents, success, warning, error, each with a ten-step OKLCH scale. Show a live preview of a small page using the palette. Contrast ratio for every text and background pair with WCAG pass or fail and a suggested fix. Light and dark versions. Lock a colour and regenerate the rest. Copy as CSS custom properties. Neutral interface so the palette is the star."
Anticode's model writes it as one app that runs in the browser. Saved palettes can be kept in that browser between visits if you ask for it. Test the contrast maths against a known pair, such as black on white (21:1) and mid-grey on white.
Limits
- No picking colours from photos with the camera, and no fetching images from the web. A palette from an image would need you to choose a file on your device; ask for it and test it.
- No sync of saved palettes between devices or with a design tool. Copy the CSS or the hex list out.
- No colour-blindness guarantee. A simulation preview helps, but test real pages with real people where it matters.
- Contrast isn't the whole of accessibility. Size, weight and spacing matter too; see colour contrast for websites.
To understand the colour choices Anticode itself makes for published sites, see action colours and the design gate.
Questions people ask
Can the color palette generator export to Figma?
Not directly. Copy the hex values or CSS variables and paste them into your design tool.
Which contrast standard does it use?
Ask for WCAG 2 contrast ratios, the standard most accessibility rules refer to, and check a few pairs by hand.
Can I use the palette in an Anticode build?
For an app build, name the exact hex values in your request and they're used as given. Pages from Anticode's design engine pick from its eight action colours instead.