#498711
#00AA6D
#00C0AE
#00DDF3
#00818ATeal
#009D8CCadet
#31CA88Emerald
#ACE496Celadon
Emerald & Celadon Drift is a vivid split color palette tagged gradient, modern, cold. A split scheme: Teal plays against Celadon across roughly 81° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Teal | #00818A | rgb(0, 129, 138) | hsl(184, 100%, 27%) | oklch(55.0% 0.094 203) | |
| Cadet | #009D8C | rgb(0, 157, 140) | hsl(174, 100%, 31%) | oklch(62.4% 0.112 182) | |
| Emerald | #31CA88 | rgb(49, 202, 136) | hsl(154, 61%, 49%) | oklch(74.6% 0.157 159) | |
| Celadon | #ACE496 | rgb(172, 228, 150) | hsl(103, 59%, 74%) | oklch(86.1% 0.119 137) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (74% down to 27% lightness). A natural fit for websites, presentations and branding.
- Background: Celadon (#ACE496) is the lightest color, so it belongs on large surfaces.
- Text: Teal (#00818A) on #ACE496 gives 3.17:1, enough for large headings only.
- Primary: Cadet (#009D8C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Emerald (#31CA88) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Emerald & Celadon Drift
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#00818A
#009D8C
#31CA88
#ACE496
Color-blind check: under tritanopia, Teal and Cadet become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#00818A on #ACE496 | Aa | 3.17:1 | AA large only |
#009D8C on #ACE496 | Aa | 2.3:1 | Fail |
#00818A on #31CA88 | Aa | 2.2:1 | Fail |
#009D8C on #31CA88 | Aa | 1.6:1 | Fail |
#31CA88 on #ACE496 | Aa | 1.44:1 | Fail |
#00818A on #009D8C | Aa | 1.38:1 | Fail |
Similar palettes 24 more in this mood
#A630C1
#755EF5
#7ABCFF
#80E6FF
#00736B
#20A8BE
#66B6E9
#ABC7FF
#E2D900
#6EB659
#00A381
#006C74
#B6CCFF
#62B0FF
#00A0DD
#00657B
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#D9ED92
#99D98C
#52B69A
#168AAD
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#006DA4
#4E8DF9
#A3A9FF
#D5C1FF
#93D0FF
#849DFF
#A186CC
#853E7E
#004D4F
#008276
#4BBA86
#AAE1B7
#76872B
#76B469
#78DBBE
#B9EBFF
#BFD278
#7FBE73
#3CA287
#007595
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#023E8A
#0077B6
#00B4D8
#90E0EF
#00705F
#9FB100
#4CE26B
#FBCF64
#00486A
#007D9C
#00B8BF
#90E3DE
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#003D3F
#00757A
#25B5BB
#C6F0F1
#FFDBAE
#DFC460
#91AD64
#05927F
#855A8A
#A8688F
#D893A5
#FFBEBB
#003C32
#007962
#00C397
#CFF4E8
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#184E50
#2F8F94
#43C9CF
#EBFFFF