Color Palette Generator
Press Generate or the space bar for new colors. Lock the ones you want to keep.
Color blindness preview is on. It only changes how the colors look here: the HEX codes, the copied code and the gradient link keep the true colors.
Opens these colors in the generator: switch to radial, conic or mesh, adjust them, then copy the CSS or download.
Need inspiration? Browse our curated color palettes →
About this tool
Generate color palettes for websites, apps and designs, then take them with you as HEX codes or CSS variables, or turn them into a CSS gradient in one click. Every palette has its own link, so you can bookmark it or share it.
Random and Blend
- Random: related but distinct colors. Each color's hue is a step away from its neighbour's, so the palette feels connected without repeating itself. Lock the colors you like and generate again: the new ones are built around them.
- Blend: a smooth scale from the first color to the last, like a gradient cut into separate colors. Set the two end colors and the steps in between are calculated for you. Useful for shades, charts and UI states.
FAQ
How do I make a color palette from two colors?
Switch to Blend, set the first swatch to your start color and the last swatch to your end color, and lock both. The swatches in between become even steps from one color to the other. Change the number of colors for more or fewer steps.
What is the difference between Random and Blend?
Random builds a palette of related but distinct colors: each color's hue is a step away from its neighbour's. Blend builds a smooth scale from the first color to the last, like a gradient cut into separate colors.
How do I keep a color I like?
Lock it. Generate only changes unlocked colors, and in Random the new colors are built around the ones you locked, so locking one color works like choosing a base color.
Can I make a palette from an image?
Yes. Choose From an image and upload a photo: the palette takes its main colors, as many as the number of colors you've set. The image is read in your browser and never uploaded.
How do I use the palette in CSS?
Copy the colors as a list of HEX codes, or as CSS custom properties (--color-1, --color-2 and so on) ready to paste into your stylesheet. Make it a gradient opens the palette in the gradient generator.