What are the hex codes in the Maple Cornflower & Brick Red palette?

The Maple Cornflower & Brick Red color palette consists of Espresso #4E1A2E, Brick Red #8E3B46, Cornflower #7F99E8, Champagne #F6E7D3.

How should I use the Maple Cornflower & Brick Red palette on a website?

Use Champagne #F6E7D3 as the background, Espresso #4E1A2E for text, Cornflower #7F99E8 for buttons and links, and Brick Red #8E3B46 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Champagne at 11.44:1.

Which colors in Maple Cornflower & Brick Red have enough contrast for text?

The highest-contrast pair is #4E1A2E on #F6E7D3 with a ratio of 11.44:1, which passes WCAG AA for normal text.

#4E1A2EEspresso

#8E3B46Brick Red

#7F99E8Cornflower

#F6E7D3Champagne

Maple Cornflower & Brick Red color palette

Modern Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#4E1A2E`	`rgb(78, 26, 46)`	`hsl(337, 50%, 20%)`	`oklch(30.5% 0.081 359)`
Brick Red	`#8E3B46`	`rgb(142, 59, 70)`	`hsl(352, 41%, 39%)`	`oklch(46.7% 0.113 14)`
Cornflower	`#7F99E8`	`rgb(127, 153, 232)`	`hsl(225, 70%, 70%)`	`oklch(69.6% 0.120 269)`
Champagne	`#F6E7D3`	`rgb(246, 231, 211)`	`hsl(34, 66%, 90%)`	`oklch(93.5% 0.031 75)`

Why it works and how to use it

Maple Cornflower & Brick Red is a complementary color palette tagged modern, blue. Near-complementary hues (about 169° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Cornflower takes the lead while the rest support. Lightness runs from 20% to 90%. Well suited to websites, presentations and branding.

Background: Champagne (#F6E7D3) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#4E1A2E) on #F6E7D3 gives 11.44:1, passing WCAG AAA.
Primary: Cornflower (#7F99E8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Brick Red (#8E3B46) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Maple Cornflower & Brick Red

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

#4E1A2E

#8E3B46

#7F99E8

#F6E7D3

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
`#4E1A2E` on `#F6E7D3`	Aa	11.44:1	AAA
`#8E3B46` on `#F6E7D3`	Aa	6.04:1	AA
`#4E1A2E` on `#7F99E8`	Aa	5.05:1	AA
`#8E3B46` on `#7F99E8`	Aa	2.66:1	Fail
`#7F99E8` on `#F6E7D3`	Aa	2.27:1	Fail
`#4E1A2E` on `#8E3B46`	Aa	1.9:1	Fail

:root {
  --espresso: #4E1A2E;
  --brick-red: #8E3B46;
  --cornflower: #7F99E8;
  --champagne: #F6E7D3;
}

$espresso: #4E1A2E;
$brick-red: #8E3B46;
$cornflower: #7F99E8;
$champagne: #F6E7D3;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'espresso': '#4E1A2E',
        'brick-red': '#8E3B46',
        'cornflower': '#7F99E8',
        'champagne': '#F6E7D3',
      },
    },
  },
};

{
  "name": "Maple Cornflower & Brick Red",
  "colors": [
    "#4E1A2E",
    "#8E3B46",
    "#7F99E8",
    "#F6E7D3"
  ]
}

background: linear-gradient(135deg, #4E1A2E, #8E3B46, #7F99E8, #F6E7D3);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-12-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood