#A630C1
#755EF5
#7ABCFF
#80E6FF
#D9ED92Vanilla
#99D98CCeladon
#52B69ACadet
#168AADSteel Blue
Lime to Teal is a split color palette tagged gradient, cold, green. The hues span about 121°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Vanilla | #D9ED92 | rgb(217, 237, 146) | hsl(73, 72%, 75%) | oklch(91.1% 0.117 119) | |
| Celadon | #99D98C | rgb(153, 217, 140) | hsl(110, 50%, 70%) | oklch(82.3% 0.123 140) | |
| Cadet | #52B69A | rgb(82, 182, 154) | hsl(163, 41%, 52%) | oklch(70.9% 0.103 172) | |
| Steel Blue | #168AAD | rgb(22, 138, 173) | hsl(194, 77%, 38%) | oklch(59.0% 0.107 225) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (75% down to 38% lightness). A natural fit for websites, presentations and branding.
- Background: Vanilla (#D9ED92) is the lightest color, so it belongs on large surfaces.
- Text: Steel Blue (#168AAD) on #D9ED92 gives 3.13:1, enough for large headings only.
- Primary: Celadon (#99D98C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cadet (#52B69A) 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 Lime to Teal
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
#D9ED92
#99D98C
#52B69A
#168AAD
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 |
|---|---|---|---|
#D9ED92 on #168AAD | Aa | 3.13:1 | AA large only |
#99D98C on #168AAD | Aa | 2.4:1 | Fail |
#D9ED92 on #52B69A | Aa | 1.93:1 | Fail |
#52B69A on #168AAD | Aa | 1.62:1 | Fail |
#99D98C on #52B69A | Aa | 1.49:1 | Fail |
#D9ED92 on #99D98C | Aa | 1.3:1 | Fail |
Similar palettes 24 more in this mood
#00818A
#009D8C
#31CA88
#ACE496
#023E8A
#0077B6
#00B4D8
#90E0EF
#00736B
#20A8BE
#66B6E9
#ABC7FF
#498711
#00AA6D
#00C0AE
#00DDF3
#B6CCFF
#62B0FF
#00A0DD
#00657B
#00486A
#007D9C
#00B8BF
#90E3DE
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#004D4F
#008276
#4BBA86
#AAE1B7
#005479
#0081AB
#38BEE5
#E3F2FD
#76872B
#76B469
#78DBBE
#B9EBFF
#BFD278
#7FBE73
#3CA287
#007595
#002B66
#005B8C
#009CBC
#78C7D6
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#433069
#6B4281
#A77CAF
#EFE7F0
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#E2D900
#6EB659
#00A381
#006C74