Color Palette Generator
Create, customise, and export beautiful color palettes for your design projects.
Color Palette
#1E40AF
#047857
#B91C1C
#7E22CE
#CA8A04
Export Palette
How to Use
Creating Colors
- Click "Randomise" to generate a completely new palette
- Click "Add Color" to add a new color to your palette
- Click on a color to select and edit it in detail
- Click the trash icon to remove a color from the palette
Exporting
- Select your desired export format (HEX, RGB, or Tailwind CSS)
- Click "Copy Palette to Clipboard" to export all colors at once
- Click the copy icon on an individual color to copy just that color
Color Theory Basics
Complementary Colors
Colors opposite each other on the color wheel. They create strong contrast and visual impact when used together.
Analogous Colors
Colors adjacent to each other on the color wheel. They create harmonious, visually pleasing combinations.
Triadic Colors
Three colors equally spaced around the color wheel. They offer strong visual contrast while maintaining harmony.
Design Tips
The 60-30-10 Rule
A classic interior design principle that works for web design too:
- 60% - Your primary color (background, main elements)
- 30% - Your secondary color (supporting elements)
- 10% - Accent color (calls to action, highlights)
Accessibility Considerations
When selecting colors for text and backgrounds, ensure sufficient contrast for readability:
- WCAG AA requires a contrast ratio of at least 4.5:1 for normal text
- WCAG AAA requires a contrast ratio of at least 7:1 for normal text
- Use darker colors for text on light backgrounds and vice versa
Pro Tips
- Save multiple variations of your palette for different contexts
- Create dark mode variants of your palette by adjusting brightness and saturation
- Consider color psychology when choosing colors for specific industries or purposes
- Test your palette on both light and dark backgrounds to ensure versatility
- Export your palette to Tailwind CSS format for easy integration with your web projects