Choose the colors for your product.
Start with a few colors, see them in an interface, then check readability. You can refine every generated color without starting over.
Choose colors
Use your own brand colors or start with the example. The preview updates as you make changes.
Your name becomes the prefix for exported colors: ux.prototype.
The brand color shapes primary actions. The accent adds emphasis. The neutral base shapes text and quiet surfaces.
Palette character & relationships
Custom uses your accent seed. Other relationships derive the accent hue from your brand. Changing names keeps saved overrides; only matching tokens are applied.
Independent light & dark surfaces
Surface tint changes backgrounds, text neutrals and boundaries. Preview both modes before exporting.
Seed changes regenerate ramps. Individual overrides remain until reset.
Your app, in these colors.
See how your choices work together on a real interface.
Inspect and edit generated colors
Select a swatch to copy its hex value and edit its token.