Color Palette Generator
Build coordinated palettes from a base color, with export formats for design and code.
Pick a colour or type its HEX code, such as #1E6F68.
Try one
Your result
Pick a colour to see its palette.
Light to dark scale
Matching colours
Press any colour to copy its HEX code, or copy the whole palette as CSS variables.
How to use it
- Pick a colour or type its HEX code.
- Press any swatch to copy its HEX code.
- Copy or download the whole palette as CSS variables.
Examples
- Red#FF0000 Opposite #00FFFF
- Brand green#1E6F68 500 is #1E6F68, 900 is #061615
Tool details and privacy
Pick one colour and get a light-to-dark scale from 50 to 900, plus matching opposite, neighbour, and triad colours.
One base colour becomes a full set you can paste into CSS as variables.
Options
- The scale mixes your colour with white (50 to 400) and black (600 to 900). The matching colours turn the hue around the colour wheel.
Limits
- This is a starting point, not a finished brand system.
- It does not export a design-app swatch file such as ASE.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
What is the opposite of #FF0000?
#00FFFF.
How do I copy one colour?
Press its swatch.
Can I use the palette in CSS?
Yes. Copy or download it as CSS variables.
Is the colour uploaded?
No. Everything runs in your browser.