About colour palette generator
A palette is a small set of colours that work together. Starting from one brand colour, you can build tints and shades and see them in a realistic app layout.
Building a palette
- Pick one primary colour that represents the brand.
- Add a neutral grey scale for text, borders and backgrounds.
- Add one accent for calls to action, plus success, warning and error colours.
- Keep the total small. Most interfaces need fewer colours than people expect.
Preview before you decide
The mobile mock-up shows your colours on buttons, cards and text, which reveals problems that a plain swatch hides, such as low contrast.
A worked example
Start with a brand blue such as #2449B8. The tool builds lighter tints for backgrounds and hover states and darker shades for text and pressed states. A typical ramp lets you use the lightest tint for a banner background, the middle value for buttons and the darkest shade for headings.
Tips for a usable palette
- Limit yourself to one main colour, one accent and a set of neutrals.
- Name colours by role (primary, surface, border) rather than by appearance.
- Always check that text and background pairs reach a 4.5 to 1 contrast ratio.
