Palette studio · no sign-up
One color in.
A whole system out.
Turn one brand hex into accessible harmony sets, tints, shades, and copy-ready CSS or JSON — in under a minute.
Your palette
Color harmony studio
Harmony swatches
Tap any card to copy its hex.
Tints & shades
A practical ramp from light to dark.
Contrast check
Best text color for each swatch, with its WCAG ratio.
Export
CSS custom properties
From seed to system
How it works
No upload, no account, no round trip.
Paste a brand color or use the native color picker. Three- and six-digit hex codes both work.
Switch rules and resize the set. Every swatch includes HEX, HSL, OKLCH, and contrast guidance.
Click a swatch for one color or copy the full palette as CSS variables, JSON, or a Tailwind theme.
Built for the handoff
Quiet chrome. Accurate color.
The values are calculated in your browser using standard sRGB, HSL, and OKLCH conversions — so the palette is ready for code, not just a mood board.
Relative luminance and contrast ratios, checked against AA or AAA.
A perceptual color reading alongside familiar HSL values.
Complementary, analogous, triadic, split-complementary, tetradic, and monochrome.
Copy-ready tokens with stable names for design systems and front-end work.
FAQ
Does it support 3-digit hex codes?
Yes. Enter #4E5 or 4E5 and it expands to #44EE55.
How is the best text color chosen?
The tool compares white and near-black against each swatch and picks the higher WCAG contrast ratio. The selected AA, AAA, or Off target controls the pass/fail badge.
Can I use these palettes commercially?
Yes. The colors are generated from your input, and the exported code is yours to use. Check any brand or trademark requirements that apply to the seed color.
Is my color sent anywhere?
No. Parsing, conversions, harmony generation, contrast checks, and exports all run locally in your browser.