Palette studio
Find your kind of color.
Five colors, a few useful directions, and room to make them yours. Edit any swatch or generate another starting point.
Click a color chip to open the color picker, or enter a hex code. Check text/background pairs separately before using them in a design.
Your palette is ready to edit.
A starting point, not a rule.
Start with a direction, then adjust each color to suit the work. A five-color set can give you a dark anchor, a supporting shade, an accent and a pair of lighter backgrounds.
The CSS export contains five custom properties, named --color-1 through --color-5. It does not include fonts, layout rules or contrast guarantees.
Can I use my own brand colors?
Yes. Enter a three- or six-digit hex code in a color field, or use the color picker. The input accepts a leading # or the digits alone.
Will the colors work for accessible text?
Not every combination will. Use the contrast checker to check each foreground/background pair at the size you intend to use.
Are my palettes saved?
Not automatically. The current palette stays in this page while it is open. Copy the codes or export the CSS before closing or reloading. Undo restores up to 30 recent palette changes.