#777B83
#8E8FB7
#A9AFB2
#A5D0F4
#458EB8Steel Blue
#93BFDCSky Blue
#D3C9B7Putty
#393128Jet
Royal Steel Blue & Putty is a complementary color palette tagged muted, cold, blue. Near-complementary hues (about 172° 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 |
|---|---|---|---|---|---|
| Steel Blue | #458EB8 | rgb(69, 142, 184) | hsl(202, 45%, 50%) | oklch(61.8% 0.097 236) | |
| Sky Blue | #93BFDC | rgb(147, 191, 220) | hsl(204, 51%, 72%) | oklch(78.3% 0.062 237) | |
| Putty | #D3C9B7 | rgb(211, 201, 183) | hsl(39, 24%, 77%) | oklch(83.9% 0.027 82) | |
| Jet | #393128 | rgb(57, 49, 40) | hsl(32, 18%, 19%) | oklch(31.9% 0.019 70) |
Why it works and how to use it
It works because the lightness range is wide (19% to 77%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Putty (#D3C9B7) is the lightest color, so it belongs on large surfaces.
- Text: Jet (#393128) on #D3C9B7 gives 7.79:1, passing WCAG AAA.
- Primary: Sky Blue (#93BFDC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Steel Blue (#458EB8) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Putty on Jet at 7.79:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Royal Steel Blue & Putty
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
#458EB8
#93BFDC
#D3C9B7
#393128
Color-blind check: under protanopia, Sky Blue and Putty become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#D3C9B7 on #393128 | Aa | 7.79:1 | AAA |
#93BFDC on #393128 | Aa | 6.52:1 | AA |
#458EB8 on #393128 | Aa | 3.54:1 | AA large only |
#458EB8 on #D3C9B7 | Aa | 2.2:1 | Fail |
#458EB8 on #93BFDC | Aa | 1.84:1 | Fail |
#93BFDC on #D3C9B7 | Aa | 1.19:1 | Fail |
Similar palettes 24 more in this mood
#404C60
#738DAB
#97C4F5
#E7F0F9
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#688E79
#83B9C6
#B7D3A5
#D0D1D0
#3D405B
#81B29A
#96DEFF
#F4F1DE
#D1DBF0
#7B9CA4
#7B71A9
#507C99
#2E2B59
#525088
#A09FC8
#DDDCE6
#18213B
#526195
#7393C1
#ECFFFB
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#4F4E7F
#7E7EB9
#D1D0FC
#FAF9FF
#585881
#4F748D
#B69ED1
#8FB2F0
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#2E3A66
#5C6BA6
#5EC4BE
#F5EFE4
#436291
#6B88B0
#7CA5D5
#C3D8FF
#78A89A
#55849E
#005756
#003741
#878DBE
#CBB8C4
#DEC3F6
#FFDBE0
#416E90
#6194C0
#9CBCD9
#96D7FF
#64557C
#8B83A7
#C4BCCF
#F2EFF5
#AABBF3
#D4B9CE
#DFCBFF
#CEE8FC
#5D6038
#9D7E6C
#7590C2
#82B0E6
#DBE1FF
#A1D0FC
#EAAFDB
#B9A0D5
#425355
#588DAD
#9081B1
#A8AEBB
#586386
#8C97BB
#DCE1F0
#F9FAFD
#020B25
#27446D
#C2AE91
#E3E0DB