#B08968
#DDB892
#E6CCB2
#FFF6EA
#7A5230Coffee
#6799CABlue Gray
#E4C79AOat
#FBF4E6Linen
Clay Blue Gray & Coffee is a complementary color palette tagged muted, brown, beige. Near-complementary hues (about 178° 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 |
|---|---|---|---|---|---|
| Coffee | #7A5230 | rgb(122, 82, 48) | hsl(28, 44%, 33%) | oklch(47.5% 0.072 60) | |
| Blue Gray | #6799CA | rgb(103, 153, 202) | hsl(210, 48%, 60%) | oklch(66.7% 0.091 249) | |
| Oat | #E4C79A | rgb(228, 199, 154) | hsl(36, 58%, 75%) | oklch(84.3% 0.068 79) | |
| Linen | #FBF4E6 | rgb(251, 244, 230) | hsl(40, 72%, 94%) | oklch(96.9% 0.020 85) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (94% down to 33% lightness). A natural fit for websites, presentations and branding.
- Background: Linen (#FBF4E6) is the lightest color, so it belongs on large surfaces.
- Text: Coffee (#7A5230) on #FBF4E6 gives 6.23:1, passing WCAG AA.
- Primary: Oat (#E4C79A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Blue Gray (#6799CA) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Linen at 6.23:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Clay Blue Gray & 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
#7A5230
#6799CA
#E4C79A
#FBF4E6
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#7A5230 on #FBF4E6 | Aa | 6.23:1 | AA |
#7A5230 on #E4C79A | Aa | 4.2:1 | AA large only |
#6799CA on #FBF4E6 | Aa | 2.75:1 | Fail |
#7A5230 on #6799CA | Aa | 2.27:1 | Fail |
#6799CA on #E4C79A | Aa | 1.85:1 | Fail |
#E4C79A on #FBF4E6 | Aa | 1.48:1 | Fail |
Similar palettes 24 more in this mood
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#FFF3EC
#FFD3BF
#FFB39B
#6E5147
#8A4A3C
#C98C7A
#E9C7B0
#F6EFE8
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#C4A484
#E6D3B3
#A98467
#F7F1E8
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#452700
#686265
#FFB9A3
#FFEAEC
#C2A167
#D292A5
#D9B2AD
#FFEDE2
#894940
#B77061
#DFBFA1
#FBF5ED
#5A1A2A
#005F73
#D9B8A6
#FAF3EE
#586557
#96856F
#E3D0B5
#FFFAEF
#5A4832
#A8823F
#D7AA7A
#FFE9DE
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
#FFEFE1
#F9C196
#DBA076
#BE8865
#7C7C62
#BBB286
#FDCE9D
#F5EEDF
#A66354
#E6A794
#FFDFC9
#FFF9F3
#322A00
#6F5300
#FFCDB2
#FFE9DE
#EAF7EF
#E8DCB6
#FFDAE2
#6C6243
#B89F6E
#DAC9A1
#6A6A5A
#F5F3EE
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#FFAEA7
#1E1913
#6E5A48
#EEEEEE
#7A8966
#CECEA4
#F4F9F4
#FFB7BA