Flat user interface designing is one of the popular ways to make attractive templates. The name flat comes as non-distractive, flat and two dimensional colors are used to create the template elements. The basic reference of flat UI colors has been taken from the Bootstrap Flat UI theme. But there is no limitation in using any other colors as a flat colors.
Related: Rainbow color codes with RGB and Hex values
Flat UI Color Codes
Here is the list of 20 flat UI color codes with Hex and RGB values.
| Flat UI Color Name | RGB Values | Hex Code | Visual Look |
| TURQUOISE | 26,188,156 | #1ABC9C | |
| GREEN SEA | 22,160,133 | #16A085 | |
| EMERALD | 46,204,113 | #2ECC71 | |
| NEPHRITIS | 39,174,96 | #27AE60 | |
| PETER RIVER | 52,152,219 | #3498DB | |
| BELIZE HOLE | 41,128,185 | #2980B9 | |
| AMETHYST | 155,89,182 | #9B59B6 | |
| WISTERIA | 142,68,173 | #8E44AD | |
| WET ASPHALT | 52,73,94 | #34495E | |
| MIDNIGHT BLUE | 44,62,80 | #2C3E50 | |
| SUN FLOWER | 241,196,15 | #F1C40F | |
| ORANGE | 243,156,18 | #F39C12 | |
| CARROT | 230,126,34 | #E67E22 | |
| PUMPKIN | 211,84,0 | #D35400 | |
| ALIZARIN | 231,76,60 | #E74C3C | |
| POMEGRANATE | 192,57,43 | #C0392B | |
| CLOUDS | 236,240,241 | #ECF0F1 | |
| SILVER | 189,195,199 | #BDC3C7 | |
| CONCRETE | 149,165,166 | #95A5A6 | |
| ASBESTOS | 127,140,141 | #7F8C8D |
Usage of Flat UI Colors
A flat theme should use one of the above listed colors or any other less saturated colors to create all components used on the theme. Below are some of the icons with flat colors.
Elements with Flat Colors
Generally the flat color elements will look very attractive and eye catching. Below are some examples from the Bootstrap flat UI theme.
