Color Palette Generator
Create harmonious color palettes with contrast checking. Pick a base color, choose a harmony mode, and export for your project.
:root {
--color-1: #6200EA;
--color-2: #9D63EE;
--color-3: #89EB00;
--color-4: #AAF047;
--color-5: #5C9E00;
}Click any color swatch to copy its hex code. WCAG contrast ratios are checked against white (#FFFFFF) and black (#000000).
AA requires 4.5:1 for normal text. AAA requires 7:1 for enhanced accessibility.
Color theory in web design
The 60-30-10 rule
Use your dominant color for 60% of the design (backgrounds), a secondary color for 30% (navigation, cards), and an accent color for 10% (CTAs, links). This creates visual hierarchy and prevents color overload.
Contrast and accessibility
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced readability (AAA). Large text (18px+ bold or 24px+) only needs 3:1 for AA. Always test your palette against both light and dark backgrounds.
Color psychology
Blue conveys trust (finance, healthcare). Red creates urgency (food, sales). Green signals growth (eco, finance). Purple suggests luxury (beauty, tech). Choose colors that align with your brand's emotional goals and your target audience's expectations.
Dark mode considerations
Colors that work on white backgrounds may not work on dark. Reduce saturation by 10-20% for dark mode variants. Avoid pure white (#FFFFFF) text on dark backgrounds, use a slightly warm off-white like #F5F5F5 to reduce eye strain.
Ready?
Put AI to Work for You.
Love your palette? Our AI-powered web design service builds complete brand systems, colors, typography, and layouts that convert.
Aria picks up instantly · 24/7 · Free assessment · 30-day guarantee