#FFD6D0Ballet
#FFB98AMelon
#D49808Caramel
#7F7750Shadow

Caramel & Melon Mood color palette

WarmBeigeBrown
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Caramel & Melon Mood is a vivid analogous color palette tagged warm, beige, brown. Analogous neighbors on the wheel (Ballet, Melon, Caramel) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Ballet#FFD6D0rgb(255, 214, 208)hsl(8, 100%, 91%)oklch(90.9% 0.047 28)
Melon#FFB98Argb(255, 185, 138)hsl(24, 100%, 77%)oklch(84.0% 0.102 55)
Caramel#D49808rgb(212, 152, 8)hsl(42, 93%, 43%)oklch(71.9% 0.148 80)
Shadow#7F7750rgb(127, 119, 80)hsl(50, 23%, 41%)oklch(56.6% 0.056 98)

Why it works and how to use it

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (91% down to 41% lightness). A natural fit for websites, presentations and branding.

  • Background: Ballet (#FFD6D0) is the lightest color, so it belongs on large surfaces.
  • Text: Shadow (#7F7750) on #FFD6D0 gives 3.39:1, enough for large headings only.
  • Primary: Melon (#FFB98A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
  • Accent: Caramel (#D49808) 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 Caramel & Melon Mood

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary
Card title
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#FFD6D0
#FFB98A
#D49808
#7F7750

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#FFD6D0 on #7F7750Aa3.39:1AA large only
#FFB98A on #7F7750Aa2.7:1Fail
#FFD6D0 on #D49808Aa1.9:1Fail
#D49808 on #7F7750Aa1.78:1Fail
#FFB98A on #D49808Aa1.51:1Fail
#FFD6D0 on #FFB98AAa1.26:1Fail

Similar palettes 24 more in this mood

More warm palettes →More beige palettes →More brown palettes →