#213C04
#356344
#1C8888
#6F9C8F
#82AC82Sage
#6F7A56Shadow
#006D51Spruce
#003F3CEvergreen
Mossy Spruce & Sage is a dark, analogous color palette tagged forest, nature, muted. Analogous neighbors on the wheel (Sage, Spruce, Evergreen) give it a natural, low-tension flow. 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 |
|---|---|---|---|---|---|
| Sage | #82AC82 | rgb(130, 172, 130) | hsl(120, 20%, 59%) | oklch(70.2% 0.076 145) | |
| Shadow | #6F7A56 | rgb(111, 122, 86) | hsl(78, 17%, 41%) | oklch(56.0% 0.055 122) | |
| Spruce | #006D51 | rgb(0, 109, 81) | hsl(165, 100%, 21%) | oklch(47.5% 0.097 168) | |
| Evergreen | #003F3C | rgb(0, 63, 60) | hsl(177, 100%, 12%) | oklch(33.2% 0.057 189) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (59% down to 12% lightness). A natural fit for wellness, organic and outdoor brands.
- Background: Sage (#82AC82) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#003F3C) on #82AC82 gives 4.6:1, passing WCAG AA.
- Primary: Spruce (#006D51) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Shadow (#6F7A56) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sage on Evergreen at 4.6:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Mossy Spruce & 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
#82AC82
#6F7A56
#006D51
#003F3C
Color-blind check: under protanopia, Shadow and Spruce 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 |
|---|---|---|---|
#82AC82 on #003F3C | Aa | 4.6:1 | AA |
#6F7A56 on #003F3C | Aa | 2.59:1 | Fail |
#82AC82 on #006D51 | Aa | 2.47:1 | Fail |
#006D51 on #003F3C | Aa | 1.86:1 | Fail |
#82AC82 on #6F7A56 | Aa | 1.78:1 | Fail |
#6F7A56 on #006D51 | Aa | 1.39:1 | Fail |
Similar palettes 24 more in this mood
#00480D
#005748
#007E8C
#5A96BD
#003E41
#005E1A
#008C72
#3787A7
#8DA689
#1EAE81
#009590
#575E24
#647B40
#2D6A65
#025934
#3E3300
#006032
#2D636A
#52740F
#41B29F
#2E4E28
#11769F
#6FBEC4
#61D6B4
#3F5029
#008B9A
#00A18F
#8DC19E
#1C7A41
#516E86
#4297A8
#85B5AC
#00796B
#667A3E
#0091A3
#5DA775
#00594C
#006D7A
#528556
#2786C2
#2F5D3A
#5E8F5E
#A9C99A
#EEF4E8
#005313
#186F08
#4F8F45
#8FCD85
#293515
#447F4A
#209E77
#ACAB82
#4EA26C
#AB8F00
#89B56D
#BBC649
#9AC97E
#7FA16A
#547B3C
#0B4B00
#363300
#006469
#007C60
#599E41
#676418
#48795B
#95AB83
#4FC5B1
#00561A
#2A6D23
#6CA366
#77BE65
#00937E
#3CA665
#8C9E78
#C1B84B
#72D585
#79A741
#4E947A
#3D3E00
#4D2E00
#567834
#0C9B69
#9A8900
#564D1C
#00807A
#68912E
#7DCCA1
#554223
#9B8A00
#93A869
#DAA785