Flat UI Color Chart
The Flat UI colour palette — 20 flat-design colours with hex and RGB, click to copy.
The original Flat UI colour palette from flatuicolors.com. Click a colour to copy its hex.
The Flat UI color palette
The Flat UI palette — popularized by flatuicolors.com and the Flat UI design kit — is a curated set of 20 colors chosen to work together in flat-design interfaces: no gradients, no drop shadows, just clean fills. It pairs bright, friendly hues (Turquoise #1ABC9C, Peter River blue #3498DB, Sun Flower yellow #F1C40F, Alizarin red #E74C3C) with a matching set of muted neutrals (Clouds #ECF0F1, Silver, Concrete, Asbestos), each also given a slightly darker partner for hover and active states. Click any color above to copy its hex code.
Flat UI colors became a default starting point for dashboards, landing pages and app mockups in the mid-2010s because the palette removes guesswork: every hue is already balanced against the others in saturation and lightness, so a layout built from three or four of them looks coherent with no further tuning. The named pairs (for example Emerald #2ECC71 and its darker Nephritis #27AE60) give you a built-in two-step scale for interactive elements.
Working with Flat UI colors
Treat the neutrals as your structure — background, cards, borders, secondary text — and reserve one or two of the bright hues for actions and highlights. Because the palette is small, it is easy to over-use the saturated colors; keeping them to accents is what preserves the flat, calm look. For a larger or custom set, generate a harmony from any Flat UI color with the palette generator or plot it on the color wheel. Check text pairings in the contrast checker — several Flat UI hues sit right at the WCAG AA boundary on white.
For comparison, the Tailwind and Material Design charts offer larger, weight-based systems, and the web-safe chart covers the classic 216-color grid. Every chart is linked from the color charts hub.