Skip to content

Flat UI colors

Twenty high-saturation swatches plus neutrals that defined the “flat design” blog era — still useful for dashboards, classroom demos, and rapid wireframes. Values follow the widely circulated tutorial set; verify against your client’s contract if they mandate a different vendor palette.

What this page is

A nostalgic but practical palette table: bold primaries (Turquoise, Emerald, Alizarin) and dark anchors (Midnight Blue, Wet Asphalt) that read clearly on projectors and low-end displays.

How to use it

  1. Pick a background from Clouds or Silver, set text on Wet Asphalt, and use saturated rows for buttons only.
  2. Copy HEX into CSS or slide decks; rename in your token layer if “Alizarin” is not a maintainable key.
  3. Blend toward white/black with the color mixer when you need hover rails without a full ramp generator.

Modern product UI

Flat primaries can exhaust users in dense SaaS. Consider Tailwind or Material neutrals for 80% of the surface, reserving Flat UI accents for charts only.

Related on ChromaXP

More structured systems.

Tailwind palette Balanced neutrals when Flat UI feels too loud for chrome. Palette generator Soften or complement a Flat UI anchor with harmonies. All palettes Return to the palettes hub for Material, Bootstrap, and more.

FAQ

Is this official Flat UI?

Values follow the commonly published DesignModo-style set used across tutorials; always verify against your design contract if a client specifies another source.

Which swatch for backgrounds?

Clouds and Silver are typical light backgrounds; Wet Asphalt and Midnight Blue anchor dark UI. Test contrast before setting long-form text on saturated colors.

Can I map these to design tokens?

Yes — rename to semantic roles in CSS variables export so engineers never hardcode “Carrot” in business logic.