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

More like this

Upload an image and extract dominant colors. Generate beautiful palettes for design, branding, or art.

Create linear CSS gradients and copy code instantly. Design custom gradients with multiple colors and directions.

Build coordinated light and dark theme CSS variables from a single neutral and accent color. Tune contrast and vibrancy then copy the finished tokens in seconds.

Convert colors between RGB and HSL with a live color swatch.

Design and preview CSS filters including blur, brightness, contrast, grayscale, sepia, saturate, and hue-rotate. Copy the CSS instantly.

Browse Google’s Material Design color palettes. View all shades, copy hex codes instantly, and preview text on background colors.

ADVERT