Color Flat UI
Flat UI design colors for modern interfaces
Flat UI Color Palette
The Flat UI color palette is one of the most popular and widely used color sets in modern web design. Created by Designmodo, it features 20 carefully crafted colors organized in 10 pairs — each consisting of a base color and its darker variant.
What is Flat Design? Flat design is a minimalist approach that avoids skeuomorphic elements like gradients, shadows, and textures. It relies on clean shapes, bold colors, and clear typography. The Flat UI palette was designed specifically for this aesthetic — colors are vivid yet professional, and each pair provides natural hover/active state variations.
Color Pairs
Each Flat UI color comes in a pair: a lighter base color and a darker variant. This makes it easy to create button hover states, active states, and visual depth without gradients.
All Colors — Swatches
Turquoise#1ABC9C
Green Sea#16A085
Emerald#2ECC71
Nephritis#27AE60
Peter River#3498DB
Belize Hole#2980B9
Amethyst#9B59B6
Wisteria#8E44AD
Wet Asphalt#34495E
Midnight Blue#2C3E50
Sun Flower#F1C40F
Orange#F39C12
Carrot#E67E22
Pumpkin#D35400
Alizarin#E74C3C
Pomegranate#C0392B
Clouds#ECF0F1
Silver#BDC3C7
Concrete#95A5A6
Asbestos#7F8C8D
Color Reference Table
| Swatch | Name | Hex | Type | Paired With |
|---|---|---|---|---|
| Turquoise | #1ABC9C | Base | Green Sea | |
| Green Sea | #16A085 | Dark | Turquoise | |
| Emerald | #2ECC71 | Base | Nephritis | |
| Nephritis | #27AE60 | Dark | Emerald | |
| Peter River | #3498DB | Base | Belize Hole | |
| Belize Hole | #2980B9 | Dark | Peter River | |
| Amethyst | #9B59B6 | Base | Wisteria | |
| Wisteria | #8E44AD | Dark | Amethyst | |
| Wet Asphalt | #34495E | Base | Midnight Blue | |
| Midnight Blue | #2C3E50 | Dark | Wet Asphalt | |
| Sun Flower | #F1C40F | Base | Orange | |
| Orange | #F39C12 | Dark | Sun Flower | |
| Carrot | #E67E22 | Base | Pumpkin | |
| Pumpkin | #D35400 | Dark | Carrot | |
| Alizarin | #E74C3C | Base | Pomegranate | |
| Pomegranate | #C0392B | Dark | Alizarin | |
| Clouds | #ECF0F1 | Base | Silver | |
| Silver | #BDC3C7 | Dark | Clouds | |
| Concrete | #95A5A6 | Base | Asbestos | |
| Asbestos | #7F8C8D | Dark | Concrete |
Using Flat UI Colors in CSS
:root {
/* Flat UI Base Colors */
--turquoise: #1ABC9C;
--emerald: #2ECC71;
--peter-river: #3498DB;
--amethyst: #9B59B6;
--wet-asphalt: #34495E;
--sun-flower: #F1C40F;
--carrot: #E67E22;
--alizarin: #E74C3C;
--clouds: #ECF0F1;
--concrete: #95A5A6;
/* Flat UI Dark Variants */
--green-sea: #16A085;
--nephritis: #27AE60;
--belize-hole: #2980B9;
--wisteria: #8E44AD;
--midnight-blue: #2C3E50;
--orange: #F39C12;
--pumpkin: #D35400;
--pomegranate: #C0392B;
--silver: #BDC3C7;
--asbestos: #7F8C8D;
}
/* Flat UI Button */
.btn-flat {
background: var(--peter-river);
color: #ffffff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.btn-flat:hover {
background: var(--belize-hole);
}Design Tips for Flat UI
Use color pairs for interaction states:
- Use the base color as the default state
- Use the dark variant for hover and active states
- This creates intuitive feedback without adding shadows or gradients
Color harmony tips:
- Primary action: Peter River (#3498DB) or Turquoise (#1ABC9C)
- Success: Emerald (#2ECC71)
- Warning: Sun Flower (#F1C40F) or Carrot (#E67E22)
- Danger: Alizarin (#E74C3C)
- Neutral/Muted: Wet Asphalt (#34495E) with Clouds (#ECF0F1)
The Clouds (#ECF0F1) and Silver(#BDC3C7) colors are very light. Avoid using them as text colors on white backgrounds — they don’t meet WCAG contrast requirements. Use them only for backgrounds, borders, and dividers.