The advanced color palette editor
- Create smooth color schemes that flow from one color to another
- Adjust the hue, saturation, and value of your palette or individual color swatches.
- Import, analyze, find errors and edit color schemes from your codebase.
- Automatically find the closest matches from your palette to your legacy colors.
Finally, a color palette tool built for UI designers.
Color Palette App is the first (free!) color palette generator designed specifically for UI designers. Use it to quickly create harmonious palettes perfect for modern interfaces and deliver designs that impress every time.
How to use this free color palette generator:
Building a New Color Palette
Click the “+” icon in the palettes sidebar. Delete the default swatches. Then, add a new swatch and enter the HEX code for your base color. For best results, aim for 8–10 shades with consistent hue, increasing brightness, and decreasing saturation as colors lighten.
Editing a Palette
Add or delete new swatches with one click. Customize colors using HSV, RGB, or HEX values. Then, fine-tune your choices by adjusting the hue, saturation, and value curves. How? Simply drag the handles to shape the transitions between colors.
Changing colors
Select the swatch you want to edit. Modify the HSV, RGB, or HEX values and watch as updates are instantly reflected in the palette app. Whether you’re matching branding guidelines or experimenting with new tones, you have complete control over every shade.
Checking accessibility and contrast
Design with inclusivity in mind. Use the accessible color palette generator to evaluate the contrast of every swatch against both dark and light text at various font sizes. Bad pairing? Tweak brightness, saturation, or hue until your palette is beautiful and accessible.
Using Interpolation
With the Color Palette App, you can create smooth transitions between colors with a few clicks. Select two or more handles on the curves and click the “Interpolate.” The handles in between automatically adjust for a seamless gradient or progression.
Managing Current Palette List
Easily add, delete, or rename current palettes to keep your work organized. Have outdated palettes you'd rather not lose? No problem. Click “L” to mark them as legacy, and the app will automatically move them to the Legacy section in the palette sidebar.
Exporting and Importing Palettes
Whether you're coding, designing, or sharing palettes with teammates, important and exporting palettes couldn’t be easier. Just click Import to load your palettes as JSON. Or hit Export to save them as JSON, CSS, or Plain Hex.
Mapping Old Colors to New Palettes
Struggling with legacy colors that don’t match your new palette? Import and let the app automatically map them to the most similar shades. Immediately see which colors fit, which are too far off, and where to add more shades to complete your palette.
