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.
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.
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.
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.
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.