Design palette

Flat UI Colors

A professional Flat UI reference: Original 20 plus the American palette. HEX values are the published swatches; RGB, HSL, and OKLCH are calculated. Open a color for contrast, nearest Tailwind, and exports.

40 colors

Turquoise

#1ABC9C

Original · teal

rgb(26, 188, 156)

hsl(168, 76%, 42%)

oklch(0.7115 0.1311 174.18)

OpenCompare Shades Harmony

Green Sea

#16A085

Original · teal

rgb(22, 160, 133)

hsl(168, 76%, 36%)

oklch(0.6318 0.1156 174.54)

OpenCompare Shades Harmony

Emerald

#2ECC71

Original · green

rgb(46, 204, 113)

hsl(145, 63%, 49%)

oklch(0.7459 0.1812 152.32)

OpenCompare Shades Harmony

Nephritis

#27AE60

Original · green

rgb(39, 174, 96)

hsl(145, 63%, 42%)

oklch(0.6629 0.1603 152.38)

OpenCompare Shades Harmony

Peter River

#3498DB

Original · light-blue

rgb(52, 152, 219)

hsl(204, 70%, 53%)

oklch(0.6531 0.1347 242.69)

OpenCompare Shades Harmony

Belize Hole

#2980B9

Original · light-blue

rgb(41, 128, 185)

hsl(204, 64%, 44%)

oklch(0.5759 0.1191 242.27)

OpenCompare Shades Harmony

Amethyst

#9B59B6

Original · purple

rgb(155, 89, 182)

hsl(283, 39%, 53%)

oklch(0.5772 0.1525 315.32)

OpenCompare Shades Harmony

Wisteria

#8E44AD

Original · purple

rgb(142, 68, 173)

hsl(282, 44%, 47%)

oklch(0.5261 0.1705 314.64)

OpenCompare Shades Harmony

Wet Asphalt

#34495E

Original · blue

rgb(52, 73, 94)

hsl(210, 29%, 29%)

oklch(0.397 0.0443 248.99)

OpenCompare Shades Harmony

Midnight Blue

#2C3E50

Original · blue

rgb(44, 62, 80)

hsl(210, 29%, 24%)

oklch(0.3564 0.0391 249.02)

OpenCompare Shades Harmony

Sun Flower

#F1C40F

Original · amber

rgb(241, 196, 15)

hsl(48, 89%, 50%)

oklch(0.8358 0.169 91.76)

OpenCompare Shades Harmony

Orange

#F39C12

Original · orange

rgb(243, 156, 18)

hsl(37, 90%, 51%)

oklch(0.7628 0.1626 69.37)

OpenCompare Shades Harmony

Carrot

#E67E22

Original · deep-orange

rgb(230, 126, 34)

hsl(28, 80%, 52%)

oklch(0.6958 0.1596 55.54)

OpenCompare Shades Harmony

Pumpkin

#D35400

Original · deep-orange

rgb(211, 84, 0)

hsl(24, 100%, 41%)

oklch(0.6044 0.1762 43.85)

OpenCompare Shades Harmony

Alizarin

#E74C3C

Original · red

rgb(231, 76, 60)

hsl(6, 78%, 57%)

oklch(0.6307 0.1941 29.44)

OpenCompare Shades Harmony

Pomegranate

#C0392B

Original · red

rgb(192, 57, 43)

hsl(6, 63%, 46%)

oklch(0.5433 0.174 29.69)

OpenCompare Shades Harmony

Clouds

#ECF0F1

Original · cyan

rgb(236, 240, 241)

hsl(192, 15%, 94%)

oklch(0.9524 0.0045 214.05)

OpenCompare Shades Harmony

Silver

#BDC3C7

Original · light-blue

rgb(189, 195, 199)

hsl(204, 8%, 76%)

oklch(0.8137 0.0087 236.67)

OpenCompare Shades Harmony

Concrete

#95A5A6

Original · cyan

rgb(149, 165, 166)

hsl(184, 9%, 62%)

oklch(0.7097 0.0181 201.33)

OpenCompare Shades Harmony

Asbestos

#7F8C8D

Original · grey

rgb(127, 140, 141)

hsl(184, 6%, 53%)

oklch(0.6299 0.0152 202.36)

OpenCompare Shades Harmony

Light Greenish Blue

#55EFC4

American · teal

rgb(85, 239, 196)

hsl(163, 83%, 64%)

oklch(0.8598 0.1434 170.81)

OpenCompare Shades Harmony

Faded Poster

#81ECEC

American · cyan

rgb(129, 236, 236)

hsl(180, 74%, 72%)

oklch(0.8793 0.0993 195.48)

OpenCompare Shades Harmony

Green Darner Tail

#74B9FF

American · blue

rgb(116, 185, 255)

hsl(210, 100%, 73%)

oklch(0.7682 0.123 250.03)

OpenCompare Shades Harmony

Shy Moment

#A29BFE

American · indigo

rgb(162, 155, 254)

hsl(244, 98%, 80%)

oklch(0.7359 0.1411 285.62)

OpenCompare Shades Harmony

City Lights

#DFE6E9

American · light-blue

rgb(223, 230, 233)

hsl(198, 19%, 89%)

oklch(0.9205 0.0086 225)

OpenCompare Shades Harmony

Mint Leaf

#00B894

American · teal

rgb(0, 184, 148)

hsl(168, 100%, 36%)

oklch(0.6972 0.1351 172.09)

OpenCompare Shades Harmony

Robin's Egg Blue

#00CEC9

American · cyan

rgb(0, 206, 201)

hsl(179, 100%, 40%)

oklch(0.7692 0.1321 191.66)

OpenCompare Shades Harmony

Electron Blue

#0984E3

American · light-blue

rgb(9, 132, 227)

hsl(206, 92%, 46%)

oklch(0.6052 0.1713 250.56)

OpenCompare Shades Harmony

Exodus Fruit

#6C5CE7

American · indigo

rgb(108, 92, 231)

hsl(247, 74%, 63%)

oklch(0.5676 0.202 283.07)

OpenCompare Shades Harmony

Soothing Breeze

#B2BEC3

American · light-blue

rgb(178, 190, 195)

hsl(198, 12%, 73%)

oklch(0.7937 0.0151 224.73)

OpenCompare Shades Harmony

Sour Lemon

#FFEAA7

American · amber

rgb(255, 234, 167)

hsl(46, 100%, 83%)

oklch(0.9386 0.0876 92.75)

OpenCompare Shades Harmony

First Date

#FAB1A0

American · red

rgb(250, 177, 160)

hsl(11, 90%, 80%)

oklch(0.8251 0.0894 33.55)

OpenCompare Shades Harmony

Pink Glamour

#FF7675

American · red

rgb(255, 118, 117)

hsl(0, 100%, 73%)

oklch(0.7281 0.1678 22.53)

OpenCompare Shades Harmony

Pico-8 Pink

#FD79A8

American · red

rgb(253, 121, 168)

hsl(339, 97%, 73%)

oklch(0.7421 0.1671 359.52)

OpenCompare Shades Harmony

American River

#636E72

American · blue-grey

rgb(99, 110, 114)

hsl(196, 7%, 42%)

oklch(0.5303 0.0148 221.44)

OpenCompare Shades Harmony

Bright Yarrow

#FDCB6E

American · orange

rgb(253, 203, 110)

hsl(39, 97%, 71%)

oklch(0.8677 0.1247 81.38)

OpenCompare Shades Harmony

Orangeville

#E17055

American · red

rgb(225, 112, 85)

hsl(12, 70%, 61%)

oklch(0.672 0.1471 34.64)

OpenCompare Shades Harmony

Chi-Gong

#D63031

American · red

rgb(214, 48, 49)

hsl(360, 67%, 51%)

oklch(0.5743 0.2021 26.13)

OpenCompare Shades Harmony

Prunus Avium

#E84393

American · red

rgb(232, 67, 147)

hsl(331, 78%, 59%)

oklch(0.6431 0.2118 355.21)

OpenCompare Shades Harmony

Dracula Orchid

#2D3436

American · cyan

rgb(45, 52, 54)

hsl(193, 9%, 19%)

oklch(0.3192 0.0102 216.65)

OpenCompare Shades Harmony

HEX

Represents: A compact RGB encoding written as #RRGGBB.
Useful for: CSS, design tools, URLs, and copy-paste interchange.
Advantages: Short, unambiguous, and universally supported.
Limits: Hard to edit by hue or lightness; alpha needs 8-digit HEX or a different syntax.
Developer use: Store tokens and share colors. Convert to HSL or OKLCH when you need to mix.

RGB

Represents: Red, green, and blue channel intensities on a 0–255 display grid.
Useful for: Canvas, images, and any API that talks in device pixels.
Advantages: Maps 1:1 to 24-bit screens; RGBA adds transparency.
Limits: Equal RGB steps are not equal perceived steps.
Developer use: Image processing and `rgb()` / `rgba()` CSS when you need alpha.

HSL

Represents: Hue, saturation, and lightness — a cylindrical model around RGB.
Useful for: Hover states, theme tweaks, and teaching color relationships.
Advantages: Keep hue, change lightness. Easy mental model.
Limits: Lightness is not perceptually uniform; yellow and blue at 50% do not look equally bright.
Developer use: Author palettes, then export HEX for tools that still want it.

OKLCH

Represents: Lightness, chroma, and hue in the OKLab polar space.
Useful for: Modern CSS, perceptual shade scales, and mixing.
Advantages: More even lightness than HSL; good for 50–950 ramps.
Limits: Wide-gamut values can be out of sRGB; browsers gamut-map them.
Developer use: `oklch()` in CSS when the team already ships modern browsers.