#924A43
#5C6049
#D5D2BF
#F5F3ED
#2B2B2BGunmetal
#A97B00Copper
#F1FAEESmoke
#457B9DSteel Blue
Copper & Steel Blue Tale is a complementary color palette tagged modern, gray, brown. Near-complementary hues (about 159° 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 |
|---|---|---|---|---|---|
| Gunmetal | #2B2B2B | rgb(43, 43, 43) | hsl(0, 0%, 17%) | oklch(28.9% 0.000 0) | |
| Copper | #A97B00 | rgb(169, 123, 0) | hsl(44, 100%, 33%) | oklch(61.2% 0.126 82) | |
| Smoke | #F1FAEE | rgb(241, 250, 238) | hsl(105, 55%, 96%) | oklch(97.5% 0.018 138) | |
| Steel Blue | #457B9D | rgb(69, 123, 157) | hsl(203, 39%, 44%) | oklch(56.0% 0.078 238) |
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 (96% down to 17% lightness). A natural fit for websites, presentations and branding.
- Background: Smoke (#F1FAEE) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#2B2B2B) on #F1FAEE gives 13.25:1, passing WCAG AAA.
- Primary: Copper (#A97B00) is the most saturated mid-tone; use it for buttons and links (3.56:1 against the background, fine for UI elements).
- Accent: Steel Blue (#457B9D) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Smoke at 13.25:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Copper & Steel Blue Tale
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
#2B2B2B
#A97B00
#F1FAEE
#457B9D
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2B2B2B on #F1FAEE | Aa | 13.25:1 | AAA |
#F1FAEE on #457B9D | Aa | 4.3:1 | AA large only |
#2B2B2B on #A97B00 | Aa | 3.72:1 | AA large only |
#A97B00 on #F1FAEE | Aa | 3.56:1 | AA large only |
#2B2B2B on #457B9D | Aa | 3.08:1 | AA large only |
#A97B00 on #457B9D | Aa | 1.21:1 | Fail |
Similar palettes 24 more in this mood
#1B1B1B
#BF9800
#CC3BB1
#F2F2F2
#F3F1ED
#2B2B2B
#D88B65
#7F5990
#2B2D42
#8D99AE
#EDF2F4
#A97B00
#006D77
#83C5BE
#EDF6F9
#E29578
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#1B1B1B
#D68B00
#B549D5
#F2F2F2
#FFFFFF
#F6EDE7
#C8654A
#3A2A24
#2D2B26
#F1F1F1
#AC4800
#C87CE9
#DFFFF3
#63CDBE
#C17330
#484233
#EDEEF0
#C9CCD1
#7A5A00
#0B1220
#E1F6FF
#75DECF
#3A4441
#A78423
#2D2E3A
#9299A4
#EFF2F3
#C56160
#BF6664
#293548
#F4F9F2
#E6D59B
#E0FBFC
#98E2E8
#CA804C
#0B3C42
#F4F3F1
#B9B6B1
#5F5C58
#C86A4A
#222831
#575D65
#00ADB5
#EEEEEE
#2C3424
#62694E
#C9A886
#FCF9EB
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#0F0F0F
#444444
#C8623F
#F4EEE8
#2C3F36
#7CAD93
#EDF3F1
#A5505B
#DB956B
#E6BC89
#588B8D
#F8F8F8
#3F686D
#9CBFBB
#F0F5F7
#CBA090
#FFC4C2
#6C6C6C
#976974
#F9FFFC