SwatchSpring color theme generator and contrast repair
Open and public color kits with a paired Google Font. Paid brand-guideline shops are not included.
Your imported color theme
Original names, aliases, and unedited values stay in your CSS. Previews use opaque sRGB colors; unmapped roles and states use preview defaults. Edits use opaque sRGB colors; legacy HSL channels keep their notation.
Light theme tokens
Adjust palette Channels, shades, and variations
See the color relationship
Explore a different direction
Your colors, in context
Assign a role. See it take shape.
Make something
worth sharing.
A thoughtful starting point for your next project.
The everyday collection
Small details. A fresh perspective.
See the color roles used
Every interaction, considered
Inspect the states your components need.
Disabled controls are shown for appearance; WCAG text-contrast minimums do not apply to inactive controls.
Customize state colors
Make every word readable
Check a color pair before it becomes a design decision.
Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1 (24px regular or 18.67px bold). Results check solid-color contrast, not overall accessibility.
In your preview
Checks update as you edit the current theme.
Ready for your next project
Setup instructions
Color palette fixer
Bring the colors you have. See what’s off, fix it in a click, and assign roles. How it works
1Your colors
The first color is your hero and starts locked. Locked colors are never changed by fixes. Drag the ⠿ handle to reorder.