Palette generator
Generate a color palette of five colors from one start color, free and online. Choose analogous, monochromatic, complementary, split complementary, triadic or tetradic, or let a random start color surprise you. Copy the palette as a HEX list or as CSS variables. Nothing is sent anywhere.
How to generate a color palette
- 1Type a "Start color", or click "Random start color"
- 2Choose the "Kind of palette"
- 3Copy single colors, or the whole palette as a list or CSS variables
- A palette of five colors, ready to paste
What you get
- Five colors that fit.Every palette is built around your start color, which sits in it as it is unless it is almost black or white
- Even lightness.The colors are worked out in OKLCH, so colors of the same lightness look equally light
- Nothing is sent anywhere.The palette is made by your browser, on your own device
What you can do
- Start from a color typed as #hex, rgb(), hsl(), lab(), oklch(), a CSS color name or a Tailwind name, or chosen with the color picker
- Pick one of six kinds: Analogous, Monochromatic, Complementary, Split complementary, Triadic or "Tetradic (rectangle)"
- Click "Random start color" for a new start color of middle lightness and moderate saturation
- Copy any color as HEX with one click
- "Copy as HEX list" for one HEX per line, or "Copy as CSS variables" for a :root block from --color-1 to --color-5
Good to know
- Some kinds add lighter and darker versions of the same hue, and split complementary and tetradic end with a very light tint of your color, useful as a background
- Colors that fall outside the screen's range are brought back the CSS way, keeping lightness and hue
- Lightness stays between 12 % and 98 %, so black starts as #060606 and white as #F8F8F8. A gray has no hue, so its palette is all grays
- A palette that looks good is not yet readable. Check text and background pairs with the contrast checker or the brand palette checker
Questions
How do I make a color palette from one color?
Type your color as the start color and choose a kind of palette. Five colors appear at once, built around yours, and you can copy them as a list or as CSS variables.
What does an analogous palette look like?
Analogous colors sit next to each other on the color wheel. From the preset teal #2A9D8F the tool makes #467B43, #358D69, #2A9D8F, #36ABB4 and #56B6D6, from green to light blue.
Can I get a random color palette?
Yes. "Random start color" picks a new start color with your browser's secure random numbers, and the palette follows it in the kind you have chosen.
Is my palette sent to a server?
No. The colors are worked out by your browser on your own device. No request is made with them.
More tools in Web & code
That page doesn't exist. Search or drop a file below to find the tool you need.
One site for every file job. What’s yours?
Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.
- Files Stay On Your Device
- No watermark
- Works offline
Drop a file here
A pasted file works too.
or search for a tool
Open an app
From “ugh, this file” to done, in three steps.
- Drop it, or pick a task
No file? Search for what you need. Files are processed on your device, not uploaded for processing.
- Pick what you want
Smaller, another format, signed, merged. One click, no settings to study first.
- Make it a recipe
Need three steps in a row every week? Chain them once and run the same recipe next time.
One approved toolbox for the whole team.
In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.
- Files are processed on the employee's device
- Company recipes everyone runs the same way
- One place instead of ten converter sites