#2D6A4F
#52B788
#95D5B2
#D8F3DC
#DDE8B8Vanilla
#AED1A7Celadon
#7DAD9DSage
#568598Slate
Verdant Celadon & Vanilla is a split color palette tagged gradient, muted, cold. A split scheme: Vanilla plays against Slate across roughly 123° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Vanilla | #DDE8B8 | rgb(221, 232, 184) | hsl(74, 51%, 82%) | oklch(91.1% 0.064 118) | |
| Celadon | #AED1A7 | rgb(174, 209, 167) | hsl(110, 31%, 74%) | oklch(82.4% 0.069 140) | |
| Sage | #7DAD9D | rgb(125, 173, 157) | hsl(160, 23%, 58%) | oklch(70.9% 0.056 172) | |
| Slate | #568598 | rgb(86, 133, 152) | hsl(197, 28%, 47%) | oklch(59.0% 0.059 225) |
Why it works and how to use it
With 4 chromatic colors, Celadon takes the lead while the rest support. Lightness runs from 47% to 82%. Well suited to websites, presentations and branding.
- Background: Vanilla (#DDE8B8) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#568598) on #DDE8B8 gives 3.13:1, enough for large headings only.
- Primary: Celadon (#AED1A7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#7DAD9D) 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 Verdant Celadon & Vanilla
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
#DDE8B8
#AED1A7
#7DAD9D
#568598
Color-blind check: under protanopia, Vanilla and Celadon 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 |
|---|---|---|---|
#DDE8B8 on #568598 | Aa | 3.13:1 | AA large only |
#AED1A7 on #568598 | Aa | 2.4:1 | Fail |
#DDE8B8 on #7DAD9D | Aa | 1.96:1 | Fail |
#7DAD9D on #568598 | Aa | 1.6:1 | Fail |
#AED1A7 on #7DAD9D | Aa | 1.5:1 | Fail |
#DDE8B8 on #AED1A7 | Aa | 1.31:1 | Fail |
Similar palettes 24 more in this mood
#00818A
#009D8C
#31CA88
#ACE496
#D9ED92
#99D98C
#52B69A
#168AAD
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#498711
#00AA6D
#00C0AE
#00DDF3
#4F6B6C
#75A6A8
#A4E8EA
#DBF4F5
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#2A4840
#4F8179
#7CAEA8
#C2DAD8
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#506B57
#7AAA84
#B9F1BC
#E3F4E6
#004D4F
#008276
#4BBA86
#AAE1B7
#BCF3F4
#55B1B5
#007579
#153B3D
#445C89
#759FC9
#ACDAFF
#E4F1F9
#76872B
#76B469
#78DBBE
#B9EBFF
#004B4D
#008690
#4AB3C2
#B2DDE6
#437F63
#6CD0A0
#AAEAC7
#F0FFF2
#BFD278
#7FBE73
#3CA287
#007595
#3C096C
#7B2CBF
#C77DFF
#E0AAFF
#9FA9FF
#C8AEFF
#F0BFEF
#FFE3EE
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#A630C1
#755EF5
#7ABCFF
#80E6FF
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#397700
#C88C00
#BCB600
#FFC9AC
#005EA2
#8049CD
#5B6AC0
#F7B2FF