Free Online Flat UI Colors Tool

The Flat UI palette is the curated 20-color set published with Designmodo's Flat UI framework — memorable named colors like Turquoise, Peter River and Alizarin.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed

The original 20 named Flat UI colors. Click to copy hex.

How to Use This Tool

  1. Browse the grid of 20 named colors.
  2. Click any card to copy its hex.
  3. Use Wet Asphalt and Midnight Blue as dark UI surfaces; Clouds and Silver for light surfaces; Peter River, Emerald or Alizarin as primary accents.

What Is a Flat UI Colors?

Flat UI was Designmodo's 2013 design framework that gave the flat-design movement its visual vocabulary. The palette of 20 named colors — Turquoise, Green Sea, Emerald, Nephritis, Peter River, Belize Hole, Amethyst, Wisteria, Wet Asphalt, Midnight Blue, Sunflower, Orange, Carrot, Pumpkin, Alizarin, Pomegranate, Clouds, Silver, Concrete, Asbestos — became shorthand for a generation of clean, gradient-free UI.

Product designers still reach for it because the names are easier to discuss in design reviews than raw hex ("primary buttons in Peter River") and the colors are tuned as a balanced set that holds together when used in combination.

Click any card to copy the hex. Pair Wet Asphalt or Midnight Blue with Clouds or Silver for a balanced dark-on-light layout, or use Peter River, Emerald or Alizarin as primary accents on a neutral background.

Frequently Asked Questions

What is the Flat UI palette?
A curated set of bold, named colors popularised by the Flat UI framework around 2013. Each color has a recognisable name like Turquoise, Peter River, Alizarin or Wet Asphalt.
Is flat design still relevant?
Yes. Flat colors are still widely used for icons, illustrations, dashboards and buttons — often combined with subtle shadows or gradients ('flat 2.0').
Why is each color named?
Memorable names make it easier to talk about a palette in a team — 'use Peter River for primary buttons' is clearer than 'use #3498db'.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Material Design Colors

Browse Google's Material Design 2014 color palette — 19 hues × 10 shades. Click to copy any hex code.

Tailwind Color Palette

Browse the full Tailwind CSS v4 color palette — 22 hues × 11 shades. Click any swatch to copy the hex code.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.

Color Picker

Pick any color with an interactive picker. See hex, RGB and HSL values update live, then copy in one click.

Color Contrast Checker

Check WCAG contrast between two colors. See AA and AAA pass/fail results for both normal and large text instantly.