Color palettes that don't look AI-generated (with hex codes)

Eight ready-to-use five-color palettes for SaaS and indie apps, why indigo and slate read as default, and how to apply custom tokens in Tailwind.

Updated 2026-10-15 · 4 min read · by the Unslop Me team

There's a palette that's become the house style of AI-generated sites: white or near-black backgrounds, slate-900 text, indigo-500 buttons, and a purple-to-pink gradient somewhere in the hero. It's not ugly. It's just everyone's.

Choosing your own colours is a ten-minute job, and it changes how a site feels more than almost anything else. Here are eight palettes to start from, each with five tokens.

The five tokens

Every palette below uses the same roles:

• paper: page background
• ink: text and primary buttons
• muted: secondary text
• accent: one highlight colour (links on hover, one key button, a single word)
• line: borders and dividers

The accent should be rare. If it's on every button and every icon, it stops being an accent.

Eight palettes

1. Off-white and ink, orange-red accent. paper #f4f0e8, ink #16130f, muted #6b6459, accent #ff4d1c, line #d9d2c4. Warm, confident, editorial. (Ours.)

2. Ledger. paper #f3f1ea, ink #14211b, muted #5d675f, accent #1f6f4a, line #cfd3c6. A bottle green on cream. Built for finance and money tools.

3. Terminal. paper #101210, ink #eceee6, muted #9aa196, accent #c6f432, line #2c312b. Dark without being slate, with an acid-lime accent. For dev tools.

4. Clinic. paper #eef0e8, ink #1d2a24, muted #5e6b63, accent #c4532d, line #c9d0c1. Sage and terracotta, calm but not sterile. Health, food, wellbeing.

5. Atelier. paper #f6efe4, ink #221a14, muted #76685b, accent #d2421f, line #dccab6. Warm paper with brick red. Creative tools and studios.

6. Editorial blue. paper #f5f2ec, ink #1a1714, muted #6b645a, accent #2f4bd8, line #d6cfc2. A true ultramarine instead of indigo, on warm paper. Very different from blue-600 on white.

7. Night garden. paper #14110f, ink #f1e9dc, muted #a39887, accent #e8a33d, line #2e2822. Warm dark mode with an amber accent. Good for media and entertainment.

8. Aubergine. paper #f7f3ef, ink #2a1626, muted #7a6874, accent #7b2d6b, line #e0d5d8. Proof that purple can be fine. It just has to be a specific purple.

Why these work

A few patterns separate chosen palettes from default ones:

• Warm or tinted neutrals. Pure white (#ffffff) and Tailwind greys are cool and clinical. A background with a little warmth (#f4f0e8) or a tint towards your accent instantly reads as chosen.
• Ink, not black. #16130f is softer than #000 and pairs with the paper.
• One accent, used sparingly. Generated sites often use three or four bright colours for icon backgrounds. Pick one.
• Flat, not gradient. A flat accent looks committed. If you want a gradient, use it once, on one thing.

Apply it in Tailwind

Add these as CSS variables in index.css (:root) and map them in tailwind.config theme.extend.colors:
paper #f4f0e8, ink #16130f, muted #6b6459, accent #ff4d1c, line #d9d2c4.
Then replace every default palette class in the project (indigo, violet, purple, blue, slate, gray, zinc, emerald) with these tokens: backgrounds -> paper or ink, text -> ink or muted, borders -> line, primary buttons -> bg-ink text-paper with hover:bg-accent.
Remove all gradient classes. Do not change logic.

For shadcn/ui projects (v0), set the same values on the --background, --foreground, --primary variables instead. The v0 prompts guide has the full mapping.

Check contrast

Before you ship, check text contrast. Muted text on paper should be at least 4.5:1 for body copy. Every palette above passes for ink on paper; check your muted colour at small sizes, and never put muted text on the accent.

How to pick from scratch

If none of the eight fits, build your own in four steps:

1. Start with the accent. Pick one colour that means something for your product or audience: green for money, terracotta for food, ultramarine for print and editorial. Avoid the exact Tailwind 500 shades; nudge the hue or saturation so it's yours.
2. Derive the paper from the accent. Take the accent's hue and drop saturation to 10-25% with lightness around 93-96%. That's why the Ledger cream feels slightly green and the Atelier paper feels slightly red.
3. Make the ink a very dark version of the same hue. Lightness 7-12%. Pure black looks harsh next to tinted paper.
4. Muted and line sit between them. Muted around 40% lightness for readable secondary text, line around 80-85% for borders.

Then test it on your real screens, not a palette preview. Tables, forms and empty states are where palettes fall apart.

Dark mode without the slate

Dark versions of generated sites usually land on slate-900 or zinc-950 with indigo. For a dark theme that feels chosen, use a warm or tinted near-black (#14110f, #101210), slightly off-white ink (#f1e9dc), and an accent with enough lightness to pass contrast (amber, lime, coral). Keep borders visible: dark UIs without lines turn into soup.

Next steps

Pair your palette with a font that has character (12 pairings), then scan your site to confirm the stock palette tell is gone. See which palettes other builders used on the Slop Leaderboard.

FAQ