#3E2723
#6D4C41
#A1887F
#EFEBE9
#F3EBDDEggshell
#DCCFB8Oat
#436449Juniper
#1C2A20Raisin
Beige & Forest is a split color palette tagged dark, muted, minimal. The hues span about 99°, 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 |
|---|---|---|---|---|---|
| Eggshell | #F3EBDD | rgb(243, 235, 221) | hsl(38, 48%, 91%) | oklch(94.3% 0.021 82) | |
| Oat | #DCCFB8 | rgb(220, 207, 184) | hsl(38, 34%, 79%) | oklch(85.9% 0.034 82) | |
| Juniper | #436449 | rgb(67, 100, 73) | hsl(131, 20%, 33%) | oklch(47.0% 0.058 149) | |
| Raisin | #1C2A20 | rgb(28, 42, 32) | hsl(137, 20%, 14%) | oklch(26.9% 0.027 153) |
Why it works and how to use it
With 4 chromatic colors, Oat takes the lead while the rest support. Lightness runs from 14% to 91%. Well suited to websites, presentations and branding.
- Background: Eggshell (#F3EBDD) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#1C2A20) on #F3EBDD gives 12.66:1, passing WCAG AAA.
- Primary: Oat (#DCCFB8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Juniper (#436449) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggshell on Raisin at 12.66:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Beige & Forest
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
#F3EBDD
#DCCFB8
#436449
#1C2A20
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F3EBDD on #1C2A20 | Aa | 12.66:1 | AAA |
#DCCFB8 on #1C2A20 | Aa | 9.75:1 | AAA |
#F3EBDD on #436449 | Aa | 5.62:1 | AA |
#DCCFB8 on #436449 | Aa | 4.33:1 | AA large only |
#436449 on #1C2A20 | Aa | 2.25:1 | Fail |
#F3EBDD on #DCCFB8 | Aa | 1.3:1 | Fail |
Similar palettes 24 more in this mood
#0B0B0B
#3F3F3F
#C9A961
#F7F4EC
#020B25
#27446D
#C2AE91
#E3E0DB
#1E3033
#456578
#98BD9B
#F4FFE6
#F5FBF9
#D4E3DE
#374B00
#0A1100
#FFAEA7
#1E1913
#6E5A48
#EEEEEE
#2A1A12
#704E3C
#9C6B48
#E7D4C1
#111111
#444444
#D8C3A5
#FAF6F0
#F0F6FF
#A7C9FA
#6C5A3F
#262320
#202020
#595959
#E2C179
#FDFAF2
#DEF5F9
#7798AC
#37583B
#171F0C
#FFE5E1
#A98579
#664F47
#302D2C
#006F5B
#F4EDE4
#D9C2AD
#1A1A1A
#D8D1C6
#BEB19C
#233E64
#000A1E
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#222831
#575D65
#00ADB5
#EEEEEE
#F5EEE6
#E1D3C2
#6B3A5B
#3A1F33
#261B17
#64524A
#9E6C59
#D4C3AD
#302521
#72584A
#C49A78
#FFF9F3
#32171F
#75444F
#BDAB86
#F1EDE8
#000000
#3A3A3A
#D4AF37
#F2F2F2
#212529
#525A61
#ADB5BD
#F8F9FA
#141110
#51453F
#B49A82
#FFFFFF