What are the hex codes in the Grounded Burnt Orange & Cantaloupe palette?

The Grounded Burnt Orange & Cantaloupe color palette consists of Chocolate #87410F, Burnt Orange #C15F00, Cantaloupe #FAA051, Tan #D5B89C.

How should I use the Grounded Burnt Orange & Cantaloupe palette on a website?

Use Tan #D5B89C as the background, Chocolate #87410F for text, Burnt Orange #C15F00 for buttons and links, and Cantaloupe #FAA051 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Grounded Burnt Orange & Cantaloupe have enough contrast for text?

The highest-contrast pair is #87410F on #D5B89C with a ratio of 4:1, which passes WCAG AA for large text only.

#87410FChocolate

#C15F00Burnt Orange

#FAA051Cantaloupe

#D5B89CTan

Grounded Burnt Orange & Cantaloupe color palette

Earthy Warm Brown Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Chocolate	`#87410F`	`rgb(135, 65, 15)`	`hsl(25, 80%, 29%)`	`oklch(45.8% 0.112 50)`
Burnt Orange	`#C15F00`	`rgb(193, 95, 0)`	`hsl(30, 100%, 38%)`	`oklch(59.3% 0.151 53)`
Cantaloupe	`#FAA051`	`rgb(250, 160, 81)`	`hsl(28, 94%, 65%)`	`oklch(78.2% 0.142 60)`
Tan	`#D5B89C`	`rgb(213, 184, 156)`	`hsl(29, 40%, 72%)`	`oklch(80.0% 0.051 66)`

Why it works and how to use it

Grounded Burnt Orange & Cantaloupe is a vivid monochromatic color palette tagged earthy, warm, brown. All four colors sit within 5° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 4 chromatic colors, Burnt Orange takes the lead while the rest support. Lightness runs from 29% to 72%. Well suited to wellness, organic and outdoor brands.

Background: Tan (#D5B89C) is the lightest color, so it belongs on large surfaces.
Text: Chocolate (#87410F) on #D5B89C gives 4:1, enough for large headings only.
Primary: Burnt Orange (#C15F00) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cantaloupe (#FAA051) 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 Grounded Burnt Orange & Cantaloupe

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

Roles are assigned by lightness.

Color blindness simulation

#87410F

#C15F00

#FAA051

#D5B89C

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

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#87410F` on `#D5B89C`	Aa	4:1	AA large only
`#87410F` on `#FAA051`	Aa	3.66:1	AA large only
`#C15F00` on `#D5B89C`	Aa	2.28:1	Fail
`#C15F00` on `#FAA051`	Aa	2.08:1	Fail
`#87410F` on `#C15F00`	Aa	1.76:1	Fail
`#FAA051` on `#D5B89C`	Aa	1.09:1	Fail

:root {
  --chocolate: #87410F;
  --burnt-orange: #C15F00;
  --cantaloupe: #FAA051;
  --tan: #D5B89C;
}

$chocolate: #87410F;
$burnt-orange: #C15F00;
$cantaloupe: #FAA051;
$tan: #D5B89C;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'chocolate': '#87410F',
        'burnt-orange': '#C15F00',
        'cantaloupe': '#FAA051',
        'tan': '#D5B89C',
      },
    },
  },
};

{
  "name": "Grounded Burnt Orange & Cantaloupe",
  "colors": [
    "#87410F",
    "#C15F00",
    "#FAA051",
    "#D5B89C"
  ]
}

background: linear-gradient(135deg, #87410F, #C15F00, #FAA051, #D5B89C);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-10-26 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood