1. Paste the colors you already have
You don’t need to start over. Open the Color Palette Fixer and paste up to 10 hex codes: a list, a CSS block, or a Coolors link all work. You can also add colors one at a time.
The first color becomes your hero and starts locked. A locked color is never changed by a fix, so your signature brand color stays exact. Lock any other color you need to keep, too.
A health score appears right away. It runs ten checks: at least three colors, a clear main color, a light neutral, a dark neutral, no more than three bright colors, hues that follow a harmony, nothing sticking out, no near-duplicates, a readable text pair, and contrast coverage.
2. Balance the colors that stick out
The Harmony check compares every unlocked color with the palette’s typical vibrancy and lightness. A neon cyan in a set of pastels is flagged as too vibrant. A deep blue among soft tints is flagged as too vibrant and too dark.
Each flag shows the current color next to a suggested one, and whether the change is contrast-safe: every pair that reached 4.5:1 before still does. Apply the ones you like and dismiss the rest. Apply all fixes does it in one click.
3. Add tinted neutrals for text and backgrounds
Most broken palettes have plenty of color and nothing to put it on. You need a near-white for backgrounds and a near-black for body text. Pure white and black work, but neutrals with a trace of your hero hue feel like part of the brand.
Smart suggestions offer a light neutral, a dark neutral, and a harmony color built from your hero. Use Shuffle to see another option and Add to palette to keep it. Body text needs at least 4.5:1 against its background; a tinted near-black on a tinted near-white usually clears 12:1.
4. Give every color a job
Assign each color a role: Hero for the main brand color and primary buttons, Accent for links and highlights, Light neutral for backgrounds, Dark neutral for text, and Supporting for everything else. Roles stop a palette from looking random, because each color has one obvious use.
Check the contrast grid for the pairs you plan to use. When the score looks right, choose Use this palette. Hero, accent, and neutrals load into the editor with light and dark themes. If the accent is too faint for links in either mode, SwatchSpring darkens or lightens it for that mode. Then export CSS, Tailwind, shadcn/ui, or tokens.
What the checks cover
Harmony and balance checks are guidance based on hue relationships and OKLCH lightness and chroma. They are not rules every brand must follow. Contrast checks cover solid-color pairs, not images, gradients, or every text size. Test the final theme in your real screens, and see the W3C explanation of text contrast for the requirement itself.
Put your colors to work.
Open SwatchSpring