#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#5C4B51Umber
#A8B994Sage
#FFE3D4Champagne
#FFA7A4Melon
Bold Melon & Sage is a split color palette tagged minimal, gray, beige. The hues span about 86°, 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 |
|---|---|---|---|---|---|
| Umber | #5C4B51 | rgb(92, 75, 81) | hsl(339, 10%, 33%) | oklch(43.2% 0.025 355) | |
| Sage | #A8B994 | rgb(168, 185, 148) | hsl(88, 21%, 65%) | oklch(76.3% 0.055 128) | |
| Champagne | #FFE3D4 | rgb(255, 227, 212) | hsl(21, 100%, 92%) | oklch(93.5% 0.037 50) | |
| Melon | #FFA7A4 | rgb(255, 167, 164) | hsl(2, 100%, 82%) | oklch(81.4% 0.105 22) |
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 (92% down to 33% lightness). A natural fit for websites, presentations and branding.
- Background: Champagne (#FFE3D4) is the lightest color, so it belongs on large surfaces.
- Text: Umber (#5C4B51) on #FFE3D4 gives 6.66:1, passing WCAG AA.
- Primary: Melon (#FFA7A4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#A8B994) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Umber on Champagne at 6.66:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bold Melon & Sage
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
#5C4B51
#A8B994
#FFE3D4
#FFA7A4
Color-blind check: under protanopia and deuteranopia, Sage and Melon become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#5C4B51 on #FFE3D4 | Aa | 6.66:1 | AA |
#5C4B51 on #FFA7A4 | Aa | 4.39:1 | AA large only |
#5C4B51 on #A8B994 | Aa | 3.89:1 | AA large only |
#A8B994 on #FFE3D4 | Aa | 1.71:1 | Fail |
#FFE3D4 on #FFA7A4 | Aa | 1.52:1 | Fail |
#A8B994 on #FFA7A4 | Aa | 1.13:1 | Fail |
Similar palettes 24 more in this mood
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#5C4B51
#8CBEB2
#F2EBBF
#F3B562
#2E3440
#4C566A
#D8DEE9
#EBCB8B
#FFFDE8
#FFF3A3
#D4EBC2
#3B4C3A
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#F0EFE4
#D1BA00
#B8B498
#2E2B1B
#FDF7ED
#C61C26
#E5D3BA
#313235
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
#FDFDFF
#FFDFBC
#B9B9B9
#222222
#3A332F
#E07500
#BEA99C
#F0ECE9
#1E1E10
#DC45A0
#DADABB
#F3F3EA
#EEECF5
#FFD878
#D3C9EF
#1C1925
#0B0B0B
#3F3F3F
#C9A961
#F7F4EC
#F1EDEA
#C2AA9C
#3278FF
#241E1B
#FBF7EF
#EAD9B8
#C9A961
#3A3226
#142532
#528494
#DE9D89
#FAF4E9
#F9EDEA
#E8C4B8
#B76E79
#4A3F3C
#FFD2BC
#474747
#936DC2
#EEEEEE
#1D1900
#B0BEB3
#D5EBBA
#FFF2E0
#F9F1EA
#DEDFC6
#55CE93
#4A3A30
#020B25
#27446D
#C2AE91
#E3E0DB
#1D2227
#586674
#F5D4B6
#FEF9F3
#3C3A36
#999288
#FCF8F1
#FDD8A0