Color Palette Generator
Create a colour palette from one colour (shades, complementary, analogous, triadic) or a picture, and copy it as CSS, Tailwind or JSON.
The picture stays in your browser.
Palette (11)
- 50 · #e0eeff
- 100 · #d5e3ff
- 200 · #c3d1ff
- 300 · #adb9ff
- 400 · #9098ff
- 500 · #7576ff
- 600 · #5d5aee
- 700 · #4843c3
- 800 · #362e9e
- 900 · #271d7e
- 950 · #190a60
Code
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to Color Converter.
Free Online Color Palette Generator
Start from one colour, or from a picture, and get a matching palette. Copy it as CSS variables, a Tailwind config, SCSS or JSON. It gives developers a quick browser-based way to solve a focused color palette generator task before moving the result into a project.
How to make a palette
Pick a base colour (or type a hex code), choose a scheme and the swatches appear. Choose the export format and copy the code.
Palette from a picture
Drop a picture below to take its main colours. Press Use the colour scheme again to go back to the base colour.
Common mistakes
- Using all palette colours at the same strength: pick one main colour and use the others sparingly.
- Putting a light shade on a white background for text: check the contrast before you ship.