Browse and copy 100+ curated color palettes for UI, branding, and web development. Filter by style, copy hex codes, CSS variables, or Tailwind classes.
Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
Start with your brand values and target audience. Use color psychology as a guide: blue conveys trust and professionalism (tech companies), green suggests growth and nature, red signals urgency or passion, purple implies luxury or creativity. Limit your primary palette to 3-5 colors: 1-2 primary brand colors, 1 accent, and neutrals. Ensure sufficient contrast (4.5:1 ratio) for accessibility.
The 60-30-10 rule is a design principle for balanced color usage: 60% dominant color (backgrounds, large areas), 30% secondary color (cards, sidebars, UI elements), 10% accent color (buttons, highlights, call-to-actions). This creates visual hierarchy while maintaining harmony. Neutral colors (white, gray, black) often form the 60% base in modern UI design.
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Use tools like the WebAIM Contrast Checker or browser DevTools to verify. Also consider: don't rely solely on color to convey information (use icons/text too), test with color blindness simulators (8% of males have some form), and ensure interactive elements have visible focus states.
For web development: hex codes (#RRGGBB) for CSS, RGB/HSL values for dynamic manipulation, and CSS custom properties (--color-primary: #hex) for theming. For design tools: most accept hex codes; Figma and Sketch support color libraries. For Tailwind CSS: define colors in tailwind.config.js under theme.extend.colors. For branding: include Pantone (print), CMYK (print), and RGB (screen) values.