#2D4059
#EA5455
#F07B3F
#FFD460
#869237Moss
#C8BE3CMustard
#F8E5D0Champagne
#B8466ABrick
Crimson Brick & Mustard is a split color palette tagged warm, yellow. The hues span about 87°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Moss | #869237 | rgb(134, 146, 55) | hsl(68, 45%, 39%) | oklch(63.1% 0.116 116) | |
| Mustard | #C8BE3C | rgb(200, 190, 60) | hsl(56, 56%, 51%) | oklch(78.7% 0.146 105) | |
| Champagne | #F8E5D0 | rgb(248, 229, 208) | hsl(32, 74%, 89%) | oklch(93.2% 0.035 70) | |
| Brick | #B8466A | rgb(184, 70, 106) | hsl(341, 45%, 50%) | oklch(55.8% 0.151 4) |
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 (89% down to 39% lightness). A natural fit for websites, presentations and branding.
- Background: Champagne (#F8E5D0) is the lightest color, so it belongs on large surfaces.
- Text: Brick (#B8466A) on #F8E5D0 gives 4.15:1, enough for large headings only.
- Primary: Mustard (#C8BE3C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Moss (#869237) 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 Crimson Brick & Mustard
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
#869237
#C8BE3C
#F8E5D0
#B8466A
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F8E5D0 on #B8466A | Aa | 4.15:1 | AA large only |
#869237 on #F8E5D0 | Aa | 2.77:1 | Fail |
#C8BE3C on #B8466A | Aa | 2.64:1 | Fail |
#869237 on #C8BE3C | Aa | 1.76:1 | Fail |
#C8BE3C on #F8E5D0 | Aa | 1.57:1 | Fail |
#869237 on #B8466A | Aa | 1.5:1 | Fail |
Similar palettes 24 more in this mood
#6A040F
#DC2F02
#F48C06
#FFBA08
#F94144
#F3722C
#F9C74F
#90BE6D
#D62828
#F77F00
#FCBF49
#EAE2B7
#1A1A1A
#FF7B00
#FFB700
#FFF3D6
#FFF200
#FFD100
#FF9F1C
#FFFFFF
#FF8C42
#FFB347
#FFD166
#FFF1CC
#251C00
#6F5E00
#D3A700
#F1BD3A
#C9971C
#E4C36B
#8A6A44
#F5EEDF
#D96C2C
#E9B44C
#8C5E2A
#F5E8C7
#7C8B3C
#C4B454
#D77A3B
#F2E9D4
#912805
#924F0E
#E1AB4F
#DBCC79
#B7426B
#D87300
#FFAC9F
#F8C13F
#727C6A
#A19C00
#E3A900
#E3B692
#FF7B54
#FFB26B
#FFD56F
#939B62
#1A1A1A
#DB9700
#D6CB1A
#F3F7D9
#907A00
#AD9A44
#D9BB00
#F3E345
#397700
#C88C00
#BCB600
#FFC9AC
#B1DA87
#5EDD9C
#B9A900
#9A6700
#7A4D00
#62975B
#ACBD6B
#DAB700
#727B00
#D2A682
#87D07C
#F9CF62
#2F2A00
#747143
#B6B571
#DBD17F
#ACBD00
#5FCF64
#FBA255
#FFD262
#FFE67E
#FBC900
#D3AC0A
#9A7C00