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.
Search or filter the palette gallery, then open a palette to reveal its available actions. Inspect the swatches together before copying an individual hexadecimal value or the complete set. The example below shows how a copied six digit hex value can be used as a CSS color; the copied text contains the color value rather than a screenshot of the swatch. Keep the full list when you want to reproduce the palette elsewhere.
Treat a gallery choice as a starting point for your interface rather than an accessibility certification. Test text against the exact backgrounds where it appears, including selected and disabled states. Color appearance also depends on displays and surrounding colors. Expand palettes with the keyboard if you prefer: the native palette buttons expose whether their action regions are open.
Copied swatch value: #FFFFFF
CSS usage: background-color: #FFFFFF;
Result: opaque white background
Choose a palette by style, tags, or search, then inspect its swatches together. Expand it to reveal copy actions for individual values or reusable definitions. The gallery provides fixed starting points rather than a personalized brand analysis. Verify foreground and background contrast in your actual interface before treating a selected combination as readable.
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.
Use the individual hex copy action for one swatch, CSS copy for custom properties, or Tailwind copy for a configuration fragment. Check the names before merging generated definitions into an existing project. Copying a palette does not modify your stylesheet or install a theme; apply the chosen values yourself and review the resulting interface.
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.