What are the hex codes in the Canyon Cornflower & Coffee palette?

The Canyon Cornflower & Coffee color palette consists of Espresso #4A2C1A, Coffee #7A4B2D, Cornflower #85A7F0, Eggshell #F2E9DA.

How should I use the Canyon Cornflower & Coffee palette on a website?

Use Eggshell #F2E9DA as the background, Espresso #4A2C1A for text, Cornflower #85A7F0 for buttons and links, and Coffee #7A4B2D for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Eggshell at 10.47:1.

Which colors in Canyon Cornflower & Coffee have enough contrast for text?

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

#4A2C1AEspresso

#7A4B2DCoffee

#85A7F0Cornflower

#F2E9DAEggshell

Canyon Cornflower & Coffee color palette

Modern Brown Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#4A2C1A`	`rgb(74, 44, 26)`	`hsl(22, 48%, 20%)`	`oklch(32.6% 0.053 51)`
Coffee	`#7A4B2D`	`rgb(122, 75, 45)`	`hsl(23, 46%, 33%)`	`oklch(46.0% 0.077 52)`
Cornflower	`#85A7F0`	`rgb(133, 167, 240)`	`hsl(221, 78%, 73%)`	`oklch(73.2% 0.113 265)`
Eggshell	`#F2E9DA`	`rgb(242, 233, 218)`	`hsl(38, 48%, 90%)`	`oklch(93.7% 0.022 81)`

Why it works and how to use it

Canyon Cornflower & Coffee is a complementary color palette tagged modern, brown, blue. Near-complementary hues (about 177° 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: Eggshell (#F2E9DA) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#4A2C1A) on #F2E9DA gives 10.47:1, passing WCAG AAA.
Primary: Cornflower (#85A7F0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Coffee (#7A4B2D) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Canyon Cornflower & Coffee

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

#4A2C1A

#7A4B2D

#85A7F0

#F2E9DA

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
`#4A2C1A` on `#F2E9DA`	Aa	10.47:1	AAA
`#7A4B2D` on `#F2E9DA`	Aa	6.07:1	AA
`#4A2C1A` on `#85A7F0`	Aa	5.27:1	AA
`#7A4B2D` on `#85A7F0`	Aa	3.06:1	AA large only
`#85A7F0` on `#F2E9DA`	Aa	1.99:1	Fail
`#4A2C1A` on `#7A4B2D`	Aa	1.72:1	Fail

:root {
  --espresso: #4A2C1A;
  --coffee: #7A4B2D;
  --cornflower: #85A7F0;
  --eggshell: #F2E9DA;
}

$espresso: #4A2C1A;
$coffee: #7A4B2D;
$cornflower: #85A7F0;
$eggshell: #F2E9DA;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'espresso': '#4A2C1A',
        'coffee': '#7A4B2D',
        'cornflower': '#85A7F0',
        'eggshell': '#F2E9DA',
      },
    },
  },
};

{
  "name": "Canyon Cornflower & Coffee",
  "colors": [
    "#4A2C1A",
    "#7A4B2D",
    "#85A7F0",
    "#F2E9DA"
  ]
}

background: linear-gradient(135deg, #4A2C1A, #7A4B2D, #85A7F0, #F2E9DA);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-04 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood