ADVERT
🌈 Flat UI Colors
Browse the Flat UI Colors palettes (v1 & v2). View all swatches and copy hex codes instantly for use in your designs and code.
Flat UI Colors Picker
Browse the classic Flat UI Colors palettes (v1 & v2). Click any swatch to copy its hex code instantly.
Flat UI v1
Turquoise#1abc9c
Emerald#2ecc71
PeterRiver#3498db
Amethyst#9b59b6
WetAsphalt#34495e
GreenSea#16a085
Nephritis#27ae60
BelizeHole#2980b9
Wisteria#8e44ad
MidnightBlue#2c3e50
SunFlower#f1c40f
Carrot#e67e22
Alizarin#e74c3c
Clouds#ecf0f1
Concrete#95a5a6
Orange#f39c12
Pumpkin#d35400
Pomegranate#c0392b
Silver#bdc3c7
Asbestos#7f8c8d
Flat UI v2
FlatFlesh#fad390
MelonMelody#f8c291
Livid#6a89cc
Spray#82ccdd
ParadiseGreen#b8e994
SquashBlossom#f6b93b
MandarinRed#e55039
AzraqBlue#4a69bd
Dupain#60a3bc
AuroralGreen#78e08f
BrightYarrow#f9ca24
SunsetOrange#eb2f06
FlatBlue#1e3799
FlatTeal#3c6382
FlatMint#38ada9
FlatGreen#079992
How to use this tool
- Browse the palette families and click any swatch to copy its hex value.
- Paste the color into your design tool, CSS file, or brand guidelines.
- Repeat as needed—recent copies show a checkmark so you know which hex code you grabbed last.
Design inspiration
- Recreate classic Flat UI dashboards or marketing pages in modern design systems.
- Build presentation slides with cohesive accent colors straight from the palette.
- Assemble handoff docs that call out exact hex codes for developers.
Color tips
- Pair saturated shades with the lighter neutrals (Clouds, Silver) for accessible contrast.
- Annotate swatches with their Friendly names—designers still recognize Peter River and Alizarin shorthand.
- Test combinations in the Color Contrast Checker tool to ensure AA/AAA compliance.
FAQ
- Are these the original Flat UI colors?
- Yes. The list contains both the v1 and v2 palettes published by Designmodo, including their canonical hex values.
- Can I export the palette?
- Copy multiple hex codes in sequence or paste them into a design token file. Bulk export is on the roadmap.
- Do you show RGB or HSL values?
- This view focuses on hex codes for quick copying. Use the Hex ⇄ RGB Converter tool if you need other formats.
ADVERT
ADVERT