#D4B693
#B18974
#8E974C
#896F00
#7F6000Cocoa
#B8885DHazelnut
#B3B96ESand
#AEE699Celadon
Wanderer Celadon & Cocoa is a split color palette tagged boho, warm, earthy. A split scheme: Cocoa plays against Celadon across roughly 76° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cocoa | #7F6000 | rgb(127, 96, 0) | hsl(45, 100%, 25%) | oklch(50.7% 0.104 86) | |
| Hazelnut | #B8885D | rgb(184, 136, 93) | hsl(28, 39%, 54%) | oklch(66.4% 0.083 62) | |
| Sand | #B3B96E | rgb(179, 185, 110) | hsl(65, 35%, 58%) | oklch(76.4% 0.098 112) | |
| Celadon | #AEE699 | rgb(174, 230, 153) | hsl(104, 61%, 75%) | oklch(86.8% 0.118 137) |
Why it works and how to use it
It works because the lightness range is wide (25% to 75%), which gives clear hierarchy between background, content and accents. Try it for wellness, organic and outdoor brands.
- Background: Celadon (#AEE699) is the lightest color, so it belongs on large surfaces.
- Text: Cocoa (#7F6000) on #AEE699 gives 4.08:1, enough for large headings only.
- Primary: Hazelnut (#B8885D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sand (#B3B96E) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Wanderer Celadon & Cocoa
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
#7F6000
#B8885D
#B3B96E
#AEE699
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#7F6000 on #AEE699 | Aa | 4.08:1 | AA large only |
#7F6000 on #B3B96E | Aa | 2.82:1 | Fail |
#B8885D on #AEE699 | Aa | 2.17:1 | Fail |
#7F6000 on #B8885D | Aa | 1.88:1 | Fail |
#B8885D on #B3B96E | Aa | 1.5:1 | Fail |
#B3B96E on #AEE699 | Aa | 1.45:1 | Fail |
Similar palettes 24 more in this mood
#C4A484
#E6D3B3
#A98467
#F7F1E8
#D98C6B
#EFC1A2
#B5A78F
#F8F2EA
#D59E92
#C49935
#855228
#884454
#C8E385
#94D098
#A8875C
#89792D
#7B5900
#A6444A
#967960
#EB8D6B
#DC8A37
#F8B872
#91654D
#F5EEDF
#E4B141
#FAD981
#9F7E57
#FFFAEE
#A44A3F
#D4A373
#DCE3A8
#FBE6C2
#C9971C
#E4C36B
#8A6A44
#F5EEDF
#8E4047
#E3A383
#E29FC4
#FBCD80
#F4A583
#FFD6BB
#D0C2A9
#FFF9F1
#923B0F
#A34E54
#AB7FAE
#D5A8BC
#DA7DAA
#E29F80
#F0B769
#F7CACA
#8BEACA
#D0DC82
#E3BD60
#457042
#5CBAA9
#5E99B8
#23737D
#356345
#63BDB2
#D88F7A
#3C7BAC
#966457
#673D22
#6C5936
#949761
#B3D6AC
#FDC76A
#89E5C7
#91C987
#585932
#DEB4A2
#BE9696
#7E5726
#4F4206
#712F00
#9B4B24
#DD8865
#E6AA93
#94364E
#915A0E
#CC9F91
#C7C09A
#88383D
#7E5164
#D79272
#DABD98
#ECA487
#C6966D
#C07873
#846839