#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#4A2C1AEspresso
#7A4B2DCoffee
#85A7F0Cornflower
#F2E9DAEggshell
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 |
Similar palettes 24 more in this mood
#7A4A2E
#2788B4
#E7A977
#F9E4D0
#6B3A1F
#4E72B5
#D4A574
#FAF0E4
#2469A5
#C97D5A
#E8C9A8
#F8F1E7
#6CC0FF
#E4F2FF
#807C6E
#D78746
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#924A43
#5C6049
#D5D2BF
#F5F3ED
#A630C1
#755EF5
#7ABCFF
#80E6FF
#3D272C
#9B7981
#AC9498
#E4C8CE
#EEABE1
#BFBAC2
#8784AB
#A96C82
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#F9E6F9
#F2BBEF
#B0E8F5
#52549C
#EEF4FF
#92CEF9
#0090DA
#072E46
#1053C1
#9267B3
#E17BA0
#FFB390
#00736B
#20A8BE
#66B6E9
#ABC7FF
#6B4E1E
#00B8C4
#E8DCC0
#F7F3EA
#8D5A56
#BBA690
#F297AF
#F7D8CA
#1B1B1B
#BF9800
#CC3BB1
#F2F2F2
#213B59
#5A4666
#9C4E60
#D59878
#005256
#CB674C
#DAB578
#D3D0BE
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#00484F
#BB9457
#99582A
#FFE6A7
#006DA4
#4E8DF9
#A3A9FF
#D5C1FF
#B6CCFF
#62B0FF
#00A0DD
#00657B