#B00020
#B28B00
#FFB4AB
#FDFDFD
#7A8966Shadow
#CECEA4Oat
#F4F9F4Smoke
#FFB7BAMelon
Melon & Oat Bloom is a pastel light, analogous color palette tagged modern, muted, warm. The hues stay within 62° of each other on the color wheel, which is why the palette feels cohesive rather than busy. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Shadow | #7A8966 | rgb(122, 137, 102) | hsl(86, 15%, 47%) | oklch(60.8% 0.054 127) | |
| Oat | #CECEA4 | rgb(206, 206, 164) | hsl(60, 30%, 73%) | oklch(84.1% 0.056 108) | |
| Smoke | #F4F9F4 | rgb(244, 249, 244) | hsl(120, 29%, 97%) | oklch(97.7% 0.008 146) | |
| Melon | #FFB7BA | rgb(255, 183, 186) | hsl(358, 100%, 86%) | oklch(84.7% 0.084 16) |
Why it works and how to use it
It works because the lightness range is wide (47% to 97%), which gives clear hierarchy between background, content and accents. Try it for social media templates and gentle interfaces.
- Background: Smoke (#F4F9F4) is the lightest color, so it belongs on large surfaces.
- Text: Shadow (#7A8966) on #F4F9F4 gives 3.52:1, enough for large headings only.
- Primary: Melon (#FFB7BA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Oat (#CECEA4) 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 Melon & Oat Bloom
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
#7A8966
#CECEA4
#F4F9F4
#FFB7BA
Color-blind check: under protanopia and deuteranopia, Oat 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 |
|---|---|---|---|
#7A8966 on #F4F9F4 | Aa | 3.52:1 | AA large only |
#7A8966 on #CECEA4 | Aa | 2.32:1 | Fail |
#7A8966 on #FFB7BA | Aa | 2.27:1 | Fail |
#F4F9F4 on #FFB7BA | Aa | 1.55:1 | Fail |
#CECEA4 on #F4F9F4 | Aa | 1.52:1 | Fail |
#CECEA4 on #FFB7BA | Aa | 1.02:1 | Fail |
Similar palettes 24 more in this mood
#BF6664
#293548
#F4F9F2
#E6D59B
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#A42677
#735831
#E9CAB4
#F6F3E9
#FFC4C2
#6C6C6C
#976974
#F9FFFC
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#924A43
#5C6049
#D5D2BF
#F5F3ED
#6B4E1E
#00B8C4
#E8DCC0
#F7F3EA
#8D5A56
#BBA690
#F297AF
#F7D8CA
#142532
#528494
#DE9D89
#FAF4E9
#FFF8F0
#FFD6A5
#FF8C42
#2B2D42
#6E5700
#7EC26E
#CCFFE7
#FDFDFD
#9D4500
#4B6642
#CDD6B4
#F6F3E9
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#3C4B2C
#74814C
#FCBE7B
#FFFBE2
#FFAF7F
#E0961F
#E3FFFF
#818181
#2469A5
#C97D5A
#E8C9A8
#F8F1E7
#8B5E1E
#AD9FFA
#F3D48A
#FFF8E5
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#D0423B
#767D50
#EDE6C3
#FDFAF0
#6B4E1E
#A791EC
#E8DCC0
#F7F3EA
#2C3424
#62694E
#C9A886
#FCF9EB
#79ABA7
#BBEBD9
#F7FCF7
#FFE6C0
#497205
#D07A4C
#F1DCC2
#FBF6EF