Generate an entire color palette
with each color shades & tones using a single color.
Pick a color from the color picker below or Enter Hex Color Value.
No Palette has been Generated.
No Preview, Generate Color Palette First.
No Saved Palette Found!
How it Works?
There is no perfect generation, some algorithm might repeat colors.
Just click on the color picker, pick a color and click on the generate button. Alternatively, you could enter a hex color code in the input field and click on the generate button.
You can also click on the image icon, select an image to pick a prominent color from the image.
Moreover, you could select from a wide variety of algorithms to generate color palette, by default it generates analogous color palette. To select a specific algorithm click on the select field below color picker and select your desired algorithm.
To select random color for generation click on the circular arrow button right to the generation button.
Features
- Select prominent color from an Image.
- Every Color is generated with 10 shades from light to dark.
- Colors can be edited or changed in the palette view by clicking on the slider button above the color that you desire to change.
- You can add more color to the generated color palette by scrolling down to the end and clicking on the Add Color button.
- You can delete a color from the color palette by clicking on the trash icon above the color.
- Individual color can be copied just by clicking on it.
- Moreover, you can export the whole color palette by clicking on the export button.
- Export format is available for CSS, SCSS, LESS and Tailwind. If you want other formats open up a github issue.
- Color Palette can be saved by clicking on the Save button, later you could view the saved color palette from the Saved Tab.
- After color palette generation, you could go to the Preview Tab to preview the colors in action on the components such as navbar, svg, buttons, etc.