What are the hex codes in the Coral & Burnt Orange Dream palette?

The Coral & Burnt Orange Dream color palette consists of Champagne #FFE0D1, Coral #FC8B4D, Burnt Orange #C55D00, Walnut #5E462F.

How should I use the Coral & Burnt Orange Dream palette on a website?

Use Champagne #FFE0D1 as the background, Walnut #5E462F for text, Burnt Orange #C55D00 for buttons and links, and Coral #FC8B4D for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Champagne on Walnut at 7.03:1.

Which colors in Coral & Burnt Orange Dream have enough contrast for text?

The highest-contrast pair is #FFE0D1 on #5E462F with a ratio of 7.03:1, which passes WCAG AA for normal text.

#FFE0D1Champagne

#FC8B4DCoral

#C55D00Burnt Orange

#5E462FWalnut

Coral & Burnt Orange Dream color palette

Gradient Vibrant Warm Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Champagne	`#FFE0D1`	`rgb(255, 224, 209)`	`hsl(20, 100%, 91%)`	`oklch(92.8% 0.040 47)`
Coral	`#FC8B4D`	`rgb(252, 139, 77)`	`hsl(21, 97%, 65%)`	`oklch(74.9% 0.157 48)`
Burnt Orange	`#C55D00`	`rgb(197, 93, 0)`	`hsl(28, 100%, 39%)`	`oklch(59.6% 0.156 51)`
Walnut	`#5E462F`	`rgb(94, 70, 47)`	`hsl(29, 33%, 28%)`	`oklch(41.4% 0.048 65)`

Why it works and how to use it

Coral & Burnt Orange Dream is a vivid monochromatic color palette tagged gradient, vibrant, warm. All four colors sit within 9° 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 28% to 91%. Well suited to websites, presentations and branding.

Background: Champagne (#FFE0D1) is the lightest color, so it belongs on large surfaces.
Text: Walnut (#5E462F) on #FFE0D1 gives 7.03:1, passing WCAG AAA.
Primary: Burnt Orange (#C55D00) is the most saturated mid-tone; use it for buttons and links (3.41:1 against the background, fine for UI elements).
Accent: Coral (#FC8B4D) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Champagne on Walnut at 7.03:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Coral & Burnt Orange Dream

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

#FFE0D1

#FC8B4D

#C55D00

#5E462F

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
`#FFE0D1` on `#5E462F`	Aa	7.03:1	AAA
`#FC8B4D` on `#5E462F`	Aa	3.74:1	AA large only
`#FFE0D1` on `#C55D00`	Aa	3.41:1	AA large only
`#C55D00` on `#5E462F`	Aa	2.06:1	Fail
`#FFE0D1` on `#FC8B4D`	Aa	1.88:1	Fail
`#FC8B4D` on `#C55D00`	Aa	1.81:1	Fail

:root {
  --champagne: #FFE0D1;
  --coral: #FC8B4D;
  --burnt-orange: #C55D00;
  --walnut: #5E462F;
}

$champagne: #FFE0D1;
$coral: #FC8B4D;
$burnt-orange: #C55D00;
$walnut: #5E462F;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'champagne': '#FFE0D1',
        'coral': '#FC8B4D',
        'burnt-orange': '#C55D00',
        'walnut': '#5E462F',
      },
    },
  },
};

{
  "name": "Coral & Burnt Orange Dream",
  "colors": [
    "#FFE0D1",
    "#FC8B4D",
    "#C55D00",
    "#5E462F"
  ]
}

background: linear-gradient(135deg, #FFE0D1, #FC8B4D, #C55D00, #5E462F);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-04-22 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood