Create stunning color combinations for your design projects with our advanced tool. This guide will show you how to use all features to their full potential.
Generate harmonious color combinations using various color theory principles.
Create random palettes with a single click and lock colors you like.
Fine-tune hue, saturation, and brightness to perfect your palette.
Ensure your color combinations meet WCAG accessibility standards.
Save your palettes in various formats like JSON, CSS, or PNG.
Switch between light and dark mode for comfortable usage.
Follow these simple steps to create your first color palette:
Click the "Generate" button to create a random palette, or use the color wheel to select a base color.
Choose from different color harmony options like complementary, analogous, triadic, etc.
Click the lock icon on any color you want to preserve while generating new palettes.
Use the sliders to adjust hue, saturation, and brightness to perfect your palette.
Use the contrast checker to ensure your color combinations meet WCAG standards.
Save your palette in your preferred format (JSON, CSS, PNG) for use in your projects.
Our generator supports various color harmony models based on color theory principles:
To use these schemes, select your base color first, then choose the desired scheme type from the dropdown menu.
Once you've generated a palette, you can customize it in several ways:
Use the HSL sliders to fine-tune each color:
Drag and drop colors to rearrange them in your palette. Click and hold on any color swatch, then drag to its new position.
Made a mistake? Use the undo/redo buttons to navigate through your edit history and revert changes.
Click directly on any color swatch to open the color picker and manually select a new color.
Save your created palette in multiple formats for use in your projects:
Export your palette as a JSON file for use in web applications or to save your work.
{
"palette": [
{"name": "Primary", "hex": "#4F46E5", "rgb": "79,70,229"},
{"name": "Secondary", "hex": "#8B5CF6", "rgb": "139,92,246"},
{"name": "Accent", "hex": "#EC4899", "rgb": "236,72,153"}
]
}Export as CSS variables to easily integrate with your web projects.
:root {
--color-primary: #4F46E5;
--color-secondary: #8B5CF6;
--color-accent: #EC4899;
--color-light: #F8FAFC;
--color-dark: #1E293B;
}Download your palette as an image file to share or include in presentations.
Click on any color's hex or RGB value to copy it directly to your clipboard.
Use the Accessibility Checker to ensure your text colors have sufficient contrast with backgrounds (aim for at least 4.5:1 ratio).
For UI design, try the 60-30-10 rule: 60% primary color, 30% secondary color, and 10% accent color.
When creating website palettes, generate 5-7 colors ranging from very light to very dark shades of your primary color for backgrounds, text, and UI elements.
Lock your main brand color and generate complementary colors around it for a cohesive brand palette.
Use the Bookmark feature to save multiple palettes you're working on for different projects.
Personalize the tool to match your workflow:
Toggle between light and dark mode by clicking the theme button in the top-right corner.
Adjust the interface layout by collapsing or expanding different sections as needed.
Speed up your workflow with keyboard shortcuts:
Ready to create your own stunning color palettes?