Color palettes for App Store screenshots
Most App Store screenshot palettes fail in the same way: they look beautiful on a 27-inch monitor and turn into mud at the size the App Store actually shows them. The carousel renders at full resolution on the product page but at thumbnail width in search results and in the "More like this" rails. If your palette only works at one of those sizes, you lose conversions at the other.
The three viewing contexts
Treat these as three separate design constraints. A palette that wins at one can lose at another.
- Full size (1290 × 2796 on iPhone). The product-page render. Where users land after tapping. Subtle gradient transitions, finer text, and complex layered colors all read here. Most designers test only this size.
- Search thumbnail (~300 × 650). The first three carousel panels rendered alongside competing app icons in App Store search. Fine details disappear. High-contrast color blocks read; subtle gradients flatten.
- Adjacent context. Your screenshot never appears in isolation in search. The seven other apps around it have their own palettes. If everyone in your category goes warm and you go warm too, your screenshot disappears into the wall.
The five-color rule
Five colors is the rough ceiling. One dominant background color (or gradient between two), one primary text color, one accent for emphasis, plus whatever colors come through from the actual screenshot of your app. Adding a sixth color usually means losing a color elsewhere, not adding on top.
The reason isn't aesthetic — it's that thumbnails compress visual information aggressively, and a palette with too many colors becomes a beige blur. Four to five colors is the band where each color stays distinct at 200px.
Contrast: WCAG AA isn't optional
Caption text against the panel background should hit WCAG AA (4.5:1 for body text, 3:1 for large text 24pt+). Not because Apple checks — they don't — but because at thumbnail size, anything below AA becomes literally unreadable. Use a contrast checker on your final caption color against your final background color before exporting.
Common failure mode: dark gray text on a slightly-lighter dark gray gradient. Looks sophisticated in Figma. Disappears completely at thumbnail width.
Category convention as a starting point, not a rule
Look at the top 20 apps in your App Store category. Note their dominant palette colors. That's your category convention — the palette users associate with "credible app in this category". You can match it (lower risk, lower differentiation) or deliberately break it (higher risk, higher differentiation if it works).
Breaking convention works when you have a specific reason. Notion's category (productivity) leaned bright pastel in 2022; Notion went near-monochrome with subtle warmth and read as more serious. Headspace's category (mental wellness) was crowded with soft pastels; Headspace's deep-orange gradient stood out without being aggressive. Match-then-break is the safe sequence: match for the first product launch, break only after you have install data to compare against.
The "adjacent in search" audit
Before you ship, do this: search the App Store for two or three keywords your app ranks (or wants to rank) on. Look at the screenshot strip below the top app for those keywords. Is your designed palette going to stand out from the apps around you, or merge with them?
This is a thirty-second audit and most teams skip it. A screenshot palette that looked unique in isolation can be the same blue-to-purple gradient as five competitors above and below you in search. The fix is usually a single accent color swap.
Dark, light, or neither
Pick a clear position: predominantly dark backgrounds, predominantly light backgrounds, or a consistent gradient family across panels. Mixing dark and light panels in one carousel is the most common failure mode — it looks like the design didn't have a director.
See dark mode vs light mode for when each wins by category. The TL;DR: dark wins in games, music, photo/video, AI; light wins in productivity, education, wellness; everything else is a coin flip and brand decides.
Color and localization
Colors carry different meanings across locales. Red is good in Chinese-speaking markets (prosperity), more negative in much of Europe. White is funereal in much of East Asia. Bright green is "go" in some places and "envious" in others. For most apps these shifts are too subtle to outweigh brand consistency — pick one palette and ship it globally. Worry about per-locale palette only if you're a brand for which color symbolism is a meaningful part of positioning (luxury, wellness, finance) and you have data to act on.
What to do this week
- Audit your current screenshots at 200px width. Anything illegible at that size needs to change.
- Verify WCAG AA contrast on every caption against its panel background.
- Search your top three keywords and screenshot the surrounding context. Does your palette stand out?
- If you're shipping a new design, lock to five colors max. Adding a sixth means dropping one.