#D9ED92
#99D98C
#52B69A
#168AAD
#2D6A4FJuniper
#65A5E7Blue Gray
#95D5B2Celadon
#D8F3DCEggshell
Blue Gray & Celadon Path is a split color palette tagged gradient, cold, green. A split scheme: Juniper plays against Eggshell across roughly 81° 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 |
|---|---|---|---|---|---|
| Juniper | #2D6A4F | rgb(45, 106, 79) | hsl(153, 40%, 30%) | oklch(47.6% 0.078 162) | |
| Blue Gray | #65A5E7 | rgb(101, 165, 231) | hsl(210, 73%, 65%) | oklch(70.6% 0.118 250) | |
| Celadon | #95D5B2 | rgb(149, 213, 178) | hsl(147, 43%, 71%) | oklch(82.0% 0.082 160) | |
| Eggshell | #D8F3DC | rgb(216, 243, 220) | hsl(129, 53%, 90%) | oklch(93.8% 0.042 150) |
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 (90% down to 30% lightness). A natural fit for websites, presentations and branding.
- Background: Eggshell (#D8F3DC) is the lightest color, so it belongs on large surfaces.
- Text: Juniper (#2D6A4F) on #D8F3DC gives 5.41:1, passing WCAG AA.
- Primary: Blue Gray (#65A5E7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Celadon (#95D5B2) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Juniper on Eggshell at 5.41:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Blue Gray & Celadon Path
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
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2D6A4F on #D8F3DC | Aa | 5.41:1 | AA |
#2D6A4F on #95D5B2 | Aa | 3.79:1 | AA large only |
#2D6A4F on #65A5E7 | Aa | 2.46:1 | Fail |
#65A5E7 on #D8F3DC | Aa | 2.2:1 | Fail |
#65A5E7 on #95D5B2 | Aa | 1.54:1 | Fail |
#95D5B2 on #D8F3DC | Aa | 1.43:1 | Fail |
Similar palettes 24 more in this mood
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#A630C1
#755EF5
#7ABCFF
#80E6FF
#00818A
#009D8C
#31CA88
#ACE496
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#023E8A
#0077B6
#00B4D8
#90E0EF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#00736B
#20A8BE
#66B6E9
#ABC7FF
#433069
#6B4281
#A77CAF
#EFE7F0
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#498711
#00AA6D
#00C0AE
#00DDF3
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF
#006DA4
#4E8DF9
#A3A9FF
#D5C1FF
#B6CCFF
#62B0FF
#00A0DD
#00657B
#7767E2
#4C9AE4
#CCA7FC
#B5CAFF
#93D0FF
#849DFF
#A186CC
#853E7E
#00486A
#007D9C
#00B8BF
#90E3DE