Design Tool

Color Palette Generator

Pick a brand color and style — get a full palette with hex codes, usage roles, and WCAG accessibility contrast scores for your mobile app.

Brand / Base Color

App Style

Guide: Color Theory for App Design

A well-structured color palette isn't just aesthetic — it drives usability, brand recognition, and accessibility compliance. Here's what every app founder and designer needs to know.

🎨

The 60-30-10 Rule

Use your primary color for 60% of the UI, secondary for 30%, and accent for 10%. This creates visual balance without overwhelming users.

♿

WCAG Accessibility

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA (7:1) is ideal for body copy. Always check contrast before shipping.

🌗

Light vs Dark Mode

Plan both modes from day one. Your palette's hue stays the same but lightness inverts. Build tokens for 'surface', 'on-surface', and 'primary' rather than raw hex values.

📱

Platform Defaults

iOS defaults to SF Pro with system blue (#007AFF). Android Material 3 uses dynamic color seeding from your brand color. Choose a brand color that works alongside platform system colors.

🔵

Semantic Color Roles

Name colors by role (Primary, Danger, Success) not by appearance (Blue, Red, Green). This lets you rebrand without rewriting component code.

🖼️

Test on Device

OLED screens punch blacks deeper; LCD screens shift colors at angles. Always test your palette on a real device before finalizing, not just in Figma.

Comparison: Color Harmony Types

Different harmony strategies suit different app categories. Here's how to pick the right one.

Harmony Type	Best For	Watch Out For
Monochromatic	Cohesive, easy to maintain, professional	Can feel flat, low contrast between sections
Complementary	High contrast, vibrant, attention-grabbing	Can feel harsh, needs careful saturation balance
Triadic	Balanced, colorful, works well for games/playful apps	Complex to manage, easy to look chaotic
Analogous	Harmonious, natural, great for health/lifestyle apps	Low contrast between related colors
Split-Complementary	Vibrant but softer than complementary, versatile	Harder to pick starting hues correctly

Color Design Glossary

Key terms used in app color design and accessibility standards.

color palettehex codeHSLRGBWCAG AAWCAG AAAcontrast ratiocolor tokendesign systembrand coloraccent colorprimary colorsecondary colormuted colorsurface colorsemantic colordark modelight modecolor accessibilitycolor harmonycomplementary coloranalogoustriadicmonochromaticcolor theoryUI colorUX color

Frequently Asked Questions

How many colors should an app's palette have?›

Most apps need 5–8 core colors: a primary, secondary, accent, background, surface, text, muted text, and a semantic error/success color. More than 10 makes consistency harder to maintain.

What WCAG level should I aim for?›

Aim for WCAG AA (4.5:1) at minimum for all body text. WCAG AAA (7:1) is ideal for critical text like error messages. For large text (18px+ or 14px bold), 3:1 is the AA threshold.

Should I use the same palette for iOS and Android?›

Yes — your brand palette should be consistent across platforms. However, you'll layer it on top of platform system colors (iOS blue, Android dynamic color). Ensure your primary color doesn't clash with system blues or greens.

What's the difference between a color and a color token?›

A raw color is a hex value like #F3652A. A color token is a named reference like `color.primary.default`. Tokens let you change the underlying hex without touching component code, which is critical for theming and dark mode.

How do I choose an accessible accent color?›

Start with your brand hue, then adjust lightness until you hit at least 3:1 contrast against the background it will sit on. Use this tool's WCAG output to verify — a passing score means it's safe for UI elements (not just icons).

Does color affect app store conversion rates?›

Indirectly yes. Color communicates trust and category fit — fintech apps use blues for trust, health apps use greens, entertainment skews warm. Mismatched color can reduce credibility on store listing screenshots.