#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#3D405BCharcoal
#81B29ASage
#F2CC8FApricot
#F4F1DEBeige
Mustard Field is a complementary color palette tagged vintage, muted, beige. Near-complementary hues (about 178° apart) make this a high-contrast, attention-grabbing combination. 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 |
|---|---|---|---|---|---|
| Charcoal | #3D405B | rgb(61, 64, 91) | hsl(234, 20%, 30%) | oklch(38.0% 0.046 279) | |
| Sage | #81B29A | rgb(129, 178, 154) | hsl(151, 24%, 60%) | oklch(72.2% 0.063 163) | |
| Apricot | #F2CC8F | rgb(242, 204, 143) | hsl(37, 79%, 75%) | oklch(86.4% 0.089 79) | |
| Beige | #F4F1DE | rgb(244, 241, 222) | hsl(52, 50%, 91%) | oklch(95.5% 0.025 100) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (91% down to 30% lightness). A natural fit for websites, presentations and branding.
- Background: Beige (#F4F1DE) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#3D405B) on #F4F1DE gives 8.87:1, passing WCAG AAA.
- Primary: Apricot (#F2CC8F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#81B29A) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Beige at 8.87:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Mustard Field
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
#3D405B
#81B29A
#F2CC8F
#F4F1DE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3D405B on #F4F1DE | Aa | 8.87:1 | AAA |
#3D405B on #F2CC8F | Aa | 6.63:1 | AA |
#3D405B on #81B29A | Aa | 4.21:1 | AA large only |
#81B29A on #F4F1DE | Aa | 2.11:1 | Fail |
#81B29A on #F2CC8F | Aa | 1.57:1 | Fail |
#F2CC8F on #F4F1DE | Aa | 1.34:1 | Fail |
Similar palettes 24 more in this mood
#BBA77C
#CFC2A5
#898A78
#F0EEE6
#7F835D
#B8BA8F
#EFE5C4
#FFFAEE
#624E47
#9E5A58
#D8B493
#FFF9F2
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#A88577
#E4C1AB
#FFEFD7
#719080
#4A5D7E
#7F92B0
#D8D2C4
#F1EDE4
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#6B6F4A
#9C9E74
#D9CFAF
#F3EEE2
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5A5934
#776D5C
#BE957B
#DFACA6
#5C302C
#AD9878
#86624B
#F5E7C6
#CAAB80
#B193A4
#A46268
#874A2D
#58737F
#9E8A87
#8EAEC2
#C6B48B
#3F777C
#76B7BD
#EFE2C7
#FFFAF0
#393A55
#6C708D
#B9ABB7
#FFF9F5
#874658
#A0584E
#94856B
#DCA885
#4B4E4D
#5D9399
#A9CDCE
#E6D09B
#95605B
#E9D0AC
#C0967C
#FCEEC9
#5C2A2E
#8E4A50
#C99095
#F5E9E9
#916F34
#CDA446
#FFE696
#FFFAEC