How to create a color palette for your app
- Generate palettes until you see one you like. Try different harmonies for different moods.
- Lock your brand color — or set it with the color picker — and generate again to find matching colors.
- Check the tints and shades for backgrounds, borders and hover states.
- Check text contrast so buttons and labels are readable for everyone.
- Export to CSS, Tailwind, Android or SwiftUI and paste it into your project.
Building an app color system
A practical app palette usually has a primary color for buttons and key actions, a secondary or accent color for highlights, a few neutrals for text, backgrounds and dividers, and semantic colors for success, warning and errors. Use your primary color sparingly — if everything is highlighted, nothing stands out.
The 60-30-10 rule
A simple way to balance colors: about 60% of the screen in a neutral background, 30% in a secondary color (cards, navigation), and 10% in your accent color (buttons, links, badges).
Plan for dark mode
Both iOS and Android users expect dark mode. Use the lighter tints of your palette for text and accents on dark backgrounds, and avoid pure black — a very dark gray is easier on the eyes.
Frequently asked questions
How do I generate a new palette?
Click "Generate" or press the space bar. Lock the colors you want to keep with the lock button and only the unlocked colors change.
What do the harmony options mean?
Harmonies are color combinations based on the color wheel. Analogous uses neighbouring hues for a calm look; complementary pairs opposite hues for strong contrast; triadic spaces three hues evenly; monochrome uses one hue in different lightness.
What is a good contrast ratio?
WCAG requires at least 4.5:1 between normal text and its background (AA) and 3:1 for large text. 7:1 meets the stricter AAA level. The contrast panel shows whether white or black text works on your selected color.
Can I share a palette?
Yes — the page address updates with your colors. Copy the URL and anyone who opens it sees the same palette.
How do I use the palette in Android Studio or Xcode?
Choose the Android tab and paste the result into res/values/colors.xml, or choose SwiftUI and paste the Color extension into your project.