Color Palette Generator helps you build a set of colours that work together and stay readable. Start with your own colours, or generate ideas from one.
Your colours
Enter or pick a colour in Color 1. Use Add Another Color for more. Your first colour is used for headings and links, your second for buttons and tags, and your third for icons.
Tints and Shades
For each colour, eight lighter and darker versions. Each shows its contrast against white and against black, in green where it reaches 4.5:1 and red where it does not. This is the fastest way to find which shade of a brand colour is safe for text.
Live Demo
Your colours applied to a sample heading, body text, link, tag, button and icon on a white background. Colours are adjusted where needed so each element meets its contrast requirement: 7:1 for headings, 4.5:1 for links, 3:1 for icons. Button and tag text is set to white or near black, whichever reads better. The swatches underneath show the exact colours used.
Palette Inspiration
Ready made directions based on your first colour: Monochromatic, Analogous, Complementary and Random. Generate gives you a new random set. Each swatch says whether white or black text reads better on it, and at what ratio.
These are starting points. Not every inspiration colour is suitable as a text colour, so check the one you choose.
Keeping your palette
The tool does not save your work. Note the hex values of the colours you want to keep.