#506B57
#7AAA84
#B9F1BC
#E3F4E6
#0B3D20Evergreen
#1F7A3FFern
#5FBF6AEmerald
#D8F3DCEggshell
Green Tonal is a monochromatic color palette tagged gradient, nature, green. All four colors sit within 18° 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 |
|---|---|---|---|---|---|
| Evergreen | #0B3D20 | rgb(11, 61, 32) | hsl(145, 69%, 14%) | oklch(31.9% 0.073 153) | |
| Fern | #1F7A3F | rgb(31, 122, 63) | hsl(141, 59%, 30%) | oklch(51.3% 0.124 151) | |
| Emerald | #5FBF6A | rgb(95, 191, 106) | hsl(127, 43%, 56%) | oklch(72.5% 0.151 146) | |
| Eggshell | #D8F3DC | rgb(216, 243, 220) | hsl(129, 53%, 90%) | oklch(93.8% 0.042 150) |
Why it works and how to use it
It works because the lightness range is wide (14% to 90%), which gives clear hierarchy between background, content and accents. Try it for wellness, organic and outdoor brands.
- Background: Eggshell (#D8F3DC) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#0B3D20) on #D8F3DC gives 10.44:1, passing WCAG AAA.
- Primary: Fern (#1F7A3F) is the most saturated mid-tone; use it for buttons and links (4.54:1 against the background, fine for UI elements).
- Accent: Emerald (#5FBF6A) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Eggshell at 10.44:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Green Tonal
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
#0B3D20
#1F7A3F
#5FBF6A
#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 |
|---|---|---|---|
#0B3D20 on #D8F3DC | Aa | 10.44:1 | AAA |
#0B3D20 on #5FBF6A | Aa | 5.37:1 | AA |
#1F7A3F on #D8F3DC | Aa | 4.54:1 | AA |
#1F7A3F on #5FBF6A | Aa | 2.34:1 | Fail |
#0B3D20 on #1F7A3F | Aa | 2.3:1 | Fail |
#5FBF6A on #D8F3DC | Aa | 1.94:1 | Fail |
Similar palettes 24 more in this mood
#243A0E
#507418
#91B63F
#E2F0D3
#225133
#368D51
#74D47E
#F0FFF2
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#00818A
#009D8C
#31CA88
#ACE496
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#397700
#C88C00
#BCB600
#FFC9AC
#D9ED92
#99D98C
#52B69A
#168AAD
#1E4C30
#368861
#62B692
#B8DFCE
#498711
#00AA6D
#00C0AE
#00DDF3
#E2D900
#6EB659
#00A381
#006C74
#00705F
#9FB100
#4CE26B
#FBCF64
#807E00
#39AE20
#00C8A2
#FFBD4E
#655E00
#E69B00
#00E5A4
#9DF25C
#904F00
#8AC337
#D0C700
#EEBD58
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#FFDBAE
#DFC460
#91AD64
#05927F
#003C32
#007962
#00C397
#CFF4E8
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#004D4F
#008276
#4BBA86
#AAE1B7
#76872B
#76B469
#78DBBE
#B9EBFF
#6B4E00
#C99A00
#7DF59F
#FFF3C4
#423A00
#7A6700
#AA9A00
#E0E6B8
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC