#225133
#368D51
#74D47E
#F0FFF2
#506B57Storm
#7AAA84Sage
#B9F1BCCeladon
#E3F4E6Beige
Verdant Celadon & Sage is a monochromatic color palette tagged gradient, nature, muted. All four colors sit within 10° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Storm | #506B57 | rgb(80, 107, 87) | hsl(136, 14%, 37%) | oklch(50.0% 0.045 153) | |
| Sage | #7AAA84 | rgb(122, 170, 132) | hsl(133, 22%, 57%) | oklch(69.3% 0.076 150) | |
| Celadon | #B9F1BC | rgb(185, 241, 188) | hsl(123, 67%, 84%) | oklch(90.6% 0.092 146) | |
| Beige | #E3F4E6 | rgb(227, 244, 230) | hsl(131, 44%, 92%) | oklch(95.1% 0.026 151) |
Why it works and how to use it
With 3 chromatic colors, Celadon takes the lead while the rest support. Lightness runs from 37% to 92%. Well suited to wellness, organic and outdoor brands.
- Background: Beige (#E3F4E6) is the lightest color, so it belongs on large surfaces.
- Text: Storm (#506B57) on #E3F4E6 gives 5.12:1, passing WCAG AA.
- Primary: Celadon (#B9F1BC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#7AAA84) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Storm on Beige at 5.12:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Verdant Celadon & Sage
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
#506B57
#7AAA84
#B9F1BC
#E3F4E6
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#506B57 on #E3F4E6 | Aa | 5.12:1 | AA |
#506B57 on #B9F1BC | Aa | 4.57:1 | AA |
#7AAA84 on #E3F4E6 | Aa | 2.32:1 | Fail |
#506B57 on #7AAA84 | Aa | 2.21:1 | Fail |
#7AAA84 on #B9F1BC | Aa | 2.07:1 | Fail |
#B9F1BC on #E3F4E6 | Aa | 1.12:1 | Fail |
Similar palettes 24 more in this mood
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#E7EAFF
#D8C7FF
#DCACDB
#C3A9B3
#4F6B6C
#75A6A8
#A4E8EA
#DBF4F5
#0B3D20
#1F7A3F
#5FBF6A
#D8F3DC
#445C89
#759FC9
#ACDAFF
#E4F1F9
#243A0E
#507418
#91B63F
#E2F0D3
#437F63
#6CD0A0
#AAEAC7
#F0FFF2
#DDE8B8
#AED1A7
#7DAD9D
#568598
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#F7F7EC
#D6E4B8
#A9C48A
#3F5233
#2F5D3A
#5E8F5E
#A9C99A
#EEF4E8
#00818A
#009D8C
#31CA88
#ACE496
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#397700
#C88C00
#BCB600
#FFC9AC
#D9ED92
#99D98C
#52B69A
#168AAD
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#1E4C30
#368861
#62B692
#B8DFCE
#498711
#00AA6D
#00C0AE
#00DDF3
#7C3300
#A25500
#EB7600
#FCE4EC
#E2D900
#6EB659
#00A381
#006C74
#00705F
#9FB100
#4CE26B
#FBCF64
#807E00
#39AE20
#00C8A2
#FFBD4E