Skip to main content
WebColorTools

Flat UI Color Chart

The classic Flat UI Colors palette — 20 named flat design colors from Turquoise to Asbestos. Click any swatch to copy HEX instantly.

Instant 100% Private Free Forever
Flat UI Flat Design Color Chart Reference Copy HEX

About the Flat UI color chart

A Flat UI color chart is the fastest way to grab the iconic flat design palette without opening flatuicolors.com. Every swatch on this page matches the original Flat UI Colors v1 set — the same HEX behind countless dashboards, admin templates, and early-2010s landing pages.

Use bright hues (Turquoise, Emerald, Peter River) for buttons and highlights; warm tones (Sun Flower, Carrot, Alizarin) for alerts and CTAs; neutrals (Clouds through Asbestos) for backgrounds and borders. Each color is a single anchor — pair with tints and shades manually, or generate a scale with our Tailwind Scale Generator.

Browse more reference palettes on the Color Charts hub, including Tailwind CSS and Material Design scale charts.

Frequently asked questions

What are Flat UI colors?
Flat UI colors are the classic 20-color palette from the Flat UI framework and flatuicolors.com — vivid, named swatches like Turquoise, Peter River, and Alizarin. Each name maps to a single HEX value (not a light-to-dark scale). They became the go-to flat design palette for dashboards, landing pages, and Bootstrap-era UI kits.
How do I copy a Flat UI color?
Click any swatch to copy its HEX value to your clipboard. Use Export palette to download the full set as CSS variables, SCSS, Tailwind config, JSON, or a plain list.
Are these the official Flat UI palette colors?
Yes. This chart lists the original Flat UI Colors v1 set — the same HEX values published on flatuicolors.com and bundled with the Flat UI CSS framework. Names and values match the widely referenced classic palette.
How is Flat UI different from Material Design or Tailwind colors?
Flat UI provides one HEX per name — twenty hand-picked flat design colors. Material Design and Tailwind ship multi-step scales (50–900 or 50–950) for building full design systems. Flat UI is best for quick accent picks and retro flat layouts; use scale charts when you need tints and shades.
Can I use Flat UI colors in CSS or Tailwind?
Absolutely. Copy any HEX directly into your CSS, or use Export palette for ready-made CSS custom properties or a Tailwind theme.extend.colors block. For custom brand scales, try the Tailwind Scale Generator.