#B3001B
#E63946
#F8E9E9
#1D1D1D
#9CA4C8Dusty Blue
#7F5E75Dove Gray
#8E332EBrick Red
#3F1000Espresso
Tangerine Brick Red & Espresso is a complementary color palette tagged dark, red. Dusty Blue and Espresso sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dusty Blue | #9CA4C8 | rgb(156, 164, 200) | hsl(229, 29%, 70%) | oklch(72.5% 0.053 275) | |
| Dove Gray | #7F5E75 | rgb(127, 94, 117) | hsl(318, 15%, 43%) | oklch(52.4% 0.054 338) | |
| Brick Red | #8E332E | rgb(142, 51, 46) | hsl(3, 51%, 37%) | oklch(45.1% 0.125 26) | |
| Espresso | #3F1000 | rgb(63, 16, 0) | hsl(15, 100%, 12%) | oklch(25.1% 0.078 40) |
Why it works and how to use it
It works because the lightness range is wide (12% to 70%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Dusty Blue (#9CA4C8) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#3F1000) on #9CA4C8 gives 6.66:1, passing WCAG AA.
- Primary: Brick Red (#8E332E) is the most saturated mid-tone; use it for buttons and links (3.21:1 against the background, fine for UI elements).
- Accent: Dove Gray (#7F5E75) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Dusty Blue on Espresso at 6.66:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Tangerine Brick Red & Espresso
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
#9CA4C8
#7F5E75
#8E332E
#3F1000
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#9CA4C8 on #3F1000 | Aa | 6.66:1 | AA |
#9CA4C8 on #8E332E | Aa | 3.21:1 | AA large only |
#7F5E75 on #3F1000 | Aa | 2.93:1 | Fail |
#9CA4C8 on #7F5E75 | Aa | 2.28:1 | Fail |
#8E332E on #3F1000 | Aa | 2.07:1 | Fail |
#7F5E75 on #8E332E | Aa | 1.41:1 | Fail |
Similar palettes 24 more in this mood
#2B0F54
#AB1F65
#FF4F69
#FFF7F8
#370617
#9D0208
#E85D04
#FAA307
#4A0E0E
#9C3F3C
#C85956
#E8D8C4
#111111
#424242
#FF3B3B
#FAFAFA
#FFF3B0
#E09F3E
#9E2A2B
#540B0E
#E0E4E9
#BC4358
#3E5169
#090E15
#3D0000
#95261C
#D04A28
#F4A259
#3A0546
#B31D33
#FD5B03
#FFF7F8
#2B2B2B
#6B4E3D
#C0392B
#F4EFEA
#340723
#9A003B
#EC534E
#FF9D59
#8A0012
#C80E2E
#E4D5D5
#090909
#B3001B
#F2A900
#1A1A1A
#FFF5E1
#C1121F
#912219
#FDF0D5
#003049
#B3001B
#F4EDE4
#D9C2AD
#1A1A1A
#BE0B4D
#901E39
#FFEEDC
#003240
#2A1E5C
#A72941
#A99CF0
#F1EFFC
#131821
#006439
#B6101C
#EEC215
#9B0012
#AD3D31
#352B15
#E4F4FF
#E0DCD9
#C2B8B3
#8B232A
#1C1110
#012C1C
#3AA274
#C9D4D0
#A80039
#2A0005
#A60024
#E0788E
#E4C9B5
#0B1F3A
#35537F
#FF6F59
#F7F3EE
#3C000D
#942338
#D1454D
#FC9B6B