#B22222
#165B33
#F8B229
#FFFFFF
#4B4A1EWalnut
#8A7A2AOlive
#42B87DEmerald
#F2E5CCChampagne
Grounded Emerald & Olive is a split color palette tagged warm, green. A split scheme: Walnut plays against Champagne across roughly 111° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Walnut | #4B4A1E | rgb(75, 74, 30) | hsl(59, 43%, 21%) | oklch(40.0% 0.064 108) | |
| Olive | #8A7A2A | rgb(138, 122, 42) | hsl(50, 53%, 35%) | oklch(57.9% 0.101 98) | |
| Emerald | #42B87D | rgb(66, 184, 125) | hsl(150, 47%, 49%) | oklch(70.1% 0.137 158) | |
| Champagne | #F2E5CC | rgb(242, 229, 204) | hsl(39, 59%, 87%) | oklch(92.6% 0.036 84) |
Why it works and how to use it
With 4 chromatic colors, Olive takes the lead while the rest support. Lightness runs from 21% to 87%. Well suited to websites, presentations and branding.
- Background: Champagne (#F2E5CC) is the lightest color, so it belongs on large surfaces.
- Text: Walnut (#4B4A1E) on #F2E5CC gives 7.34:1, passing WCAG AAA.
- Primary: Olive (#8A7A2A) is the most saturated mid-tone; use it for buttons and links (3.44:1 against the background, fine for UI elements).
- Accent: Emerald (#42B87D) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Walnut on Champagne at 7.34:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Grounded Emerald & Olive
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
#4B4A1E
#8A7A2A
#42B87D
#F2E5CC
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#4B4A1E on #F2E5CC | Aa | 7.34:1 | AAA |
#4B4A1E on #42B87D | Aa | 3.65:1 | AA large only |
#8A7A2A on #F2E5CC | Aa | 3.44:1 | AA large only |
#4B4A1E on #8A7A2A | Aa | 2.13:1 | Fail |
#42B87D on #F2E5CC | Aa | 2.01:1 | Fail |
#8A7A2A on #42B87D | Aa | 1.71:1 | Fail |
Similar palettes 24 more in this mood
#F94144
#F3722C
#F9C74F
#90BE6D
#554910
#A76704
#A5BC85
#FFC5B2
#E16700
#D98900
#D5D65B
#67C48E
#D4B693
#B18974
#8E974C
#896F00
#1C1800
#676500
#9C8C35
#E5E4A2
#FFC880
#FFAD8D
#6DB130
#8D8200
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#986200
#A19546
#92BB5D
#50DD93
#397700
#C88C00
#BCB600
#FFC9AC
#B1DA87
#5EDD9C
#B9A900
#9A6700
#7A4D00
#62975B
#ACBD6B
#DAB700
#727B00
#D2A682
#87D07C
#F9CF62
#F7D8A8
#A5C786
#E5945E
#AEAA73
#ACBD00
#5FCF64
#FBA255
#FFD262
#CDD61D
#FF9600
#499526
#8F6E00
#7F6000
#B8885D
#B3B96E
#AEE699
#B79E6D
#AAE478
#A3E1BA
#ECEA76
#D3AB00
#60D968
#BCD355
#FFC893
#FF6B8B
#FFD166
#8CD790
#FFFFFF
#684200
#688928
#1FA15B
#D6C03B
#A24002
#CD6635
#00B474
#DCF1E4
#8FCD9A
#D32636
#FBBFCC
#FDF9F3
#B9A718
#FF8F59
#B2DC82
#FFC87F