Last updated
What Is Flat UI Design?
Flat UI design emerged around 2012 as a reaction to skeuomorphism — the design style that mimicked real-world textures (leather, metal, glass). Flat design strips away gradients, shadows, and textures in favor of clean, solid colors, simple shapes, and clear typography. The Flat UI color palette, popularized by the Flat UI Colors project, provides a curated set of vibrant, harmonious colors that work well together.
The Original Flat UI Palette
| Name | Hex | RGB |
|---|---|---|
| Turquoise | #1ABC9C | 26, 188, 156 |
| Emerald | #2ECC71 | 46, 204, 113 |
| Peter River | #3498DB | 52, 152, 219 |
| Amethyst | #9B59B6 | 155, 89, 182 |
| Wet Asphalt | #34495E | 52, 73, 94 |
| Alizarin | #E74C3C | 231, 76, 60 |
| Carrot | #E67E22 | 230, 126, 34 |
| Sunflower | #F1C40F | 241, 196, 15 |
| Clouds | #ECF0F1 | 236, 240, 241 |
| Concrete | #95A5A6 | 149, 165, 166 |
Using Flat Colors in CSS
:root {
--turquoise: #1ABC9C;
--emerald: #2ECC71;
--peter-river: #3498DB;
--amethyst: #9B59B6;
--alizarin: #E74C3C;
--carrot: #E67E22;
--sunflower: #F1C40F;
--clouds: #ECF0F1;
--wet-asphalt: #34495E;
}
.btn-primary { background: var(--peter-river); color: white; }
.btn-success { background: var(--emerald); color: white; }
.btn-danger { background: var(--alizarin); color: white; }
.btn-warning { background: var(--carrot); color: white; }Color Accessibility
Not all flat colors meet WCAG contrast requirements for text. White text on Sunflower (#F1C40F) fails the 4.5:1 contrast ratio for normal text. Always check contrast ratios when using bright flat colors for text backgrounds. Use dark text on light flat colors and white text on dark flat colors.