#2C1810
#6E4E3F
#B85C38
#E0C097
#3B1829Espresso
#8E4A38Chestnut
#C27D00Ochre
#BED574Celadon
Citrus Ochre & Celadon is a dark, split color palette tagged dark, warm, earthy. A split scheme: Espresso plays against Celadon across roughly 103° 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 |
|---|---|---|---|---|---|
| Espresso | #3B1829 | rgb(59, 24, 41) | hsl(331, 42%, 16%) | oklch(26.7% 0.060 352) | |
| Chestnut | #8E4A38 | rgb(142, 74, 56) | hsl(13, 43%, 39%) | oklch(48.8% 0.097 36) | |
| Ochre | #C27D00 | rgb(194, 125, 0) | hsl(39, 100%, 38%) | oklch(64.6% 0.139 71) | |
| Celadon | #BED574 | rgb(190, 213, 116) | hsl(74, 54%, 65%) | oklch(83.5% 0.126 120) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (65% down to 16% lightness). A natural fit for wellness, organic and outdoor brands.
- Background: Celadon (#BED574) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#3B1829) on #BED574 gives 9.61:1, passing WCAG AAA.
- Primary: Ochre (#C27D00) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Chestnut (#8E4A38) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Celadon at 9.61:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Citrus Ochre & Celadon
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
#3B1829
#8E4A38
#C27D00
#BED574
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3B1829 on #BED574 | Aa | 9.61:1 | AAA |
#3B1829 on #C27D00 | Aa | 4.62:1 | AA |
#8E4A38 on #BED574 | Aa | 4.07:1 | AA large only |
#3B1829 on #8E4A38 | Aa | 2.36:1 | Fail |
#C27D00 on #BED574 | Aa | 2.08:1 | Fail |
#8E4A38 on #C27D00 | Aa | 1.95:1 | Fail |
Similar palettes 24 more in this mood
#B9C989
#AC9D68
#75490B
#2C0B00
#3A2400
#765D2D
#B58F47
#F5D6A7
#271707
#684B29
#AB8D63
#D3C9B9
#481800
#8A533C
#CE8E70
#DFAF96
#311200
#704800
#B08900
#B3C52A
#7E4F32
#CB9C85
#8B6B59
#2F1E15
#2A1A12
#704E3C
#9C6B48
#E7D4C1
#976648
#3B1703
#735443
#B9A397
#9C6D59
#765143
#4E362D
#130602
#1A0803
#563729
#9B421C
#CBAB83
#E6FBBC
#C5AD39
#903F00
#491D00
#30110D
#7B4139
#AE6755
#DAAD88
#311808
#824311
#A78043
#E4CC8E
#261D00
#735800
#C29923
#EBE2C4
#673A1D
#AB7E68
#725342
#1E0E06
#462401
#834500
#BF8D57
#F3E6DD
#2D1714
#78420B
#CD9341
#E1D5B9
#330E00
#6D493B
#84685F
#A49086
#351E00
#835000
#A16A00
#E3A331
#3E2723
#6D4C41
#A1887F
#EFEBE9
#B98874
#8B6556
#664C43
#26170F
#4A0E0E
#9C3F3C
#C85956
#E8D8C4
#441800
#994617
#C4602E
#E1DBC3