#445C89
#759FC9
#ACDAFF
#E4F1F9
#304D7CDusk
#4F78A9Steel Blue
#89B3D6Dusty Blue
#E9F1F7Frost
Bold Steel Blue & Dusk is a monochromatic color palette tagged gradient, muted, cold. All four colors sit within 11° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dusk | #304D7C | rgb(48, 77, 124) | hsl(217, 44%, 34%) | oklch(42.1% 0.086 260) | |
| Steel Blue | #4F78A9 | rgb(79, 120, 169) | hsl(213, 36%, 49%) | oklch(56.4% 0.089 254) | |
| Dusty Blue | #89B3D6 | rgb(137, 179, 214) | hsl(207, 48%, 69%) | oklch(74.9% 0.068 244) | |
| Frost | #E9F1F7 | rgb(233, 241, 247) | hsl(206, 47%, 94%) | oklch(95.4% 0.012 240) |
Why it works and how to use it
It works because the lightness range is wide (34% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#E9F1F7) is the lightest color, so it belongs on large surfaces.
- Text: Dusk (#304D7C) on #E9F1F7 gives 7.42:1, passing WCAG AAA.
- Primary: Dusty Blue (#89B3D6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Steel Blue (#4F78A9) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Dusk on Frost at 7.42:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bold Steel Blue & Dusk
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
#304D7C
#4F78A9
#89B3D6
#E9F1F7
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#304D7C on #E9F1F7 | Aa | 7.42:1 | AAA |
#4F78A9 on #E9F1F7 | Aa | 4:1 | AA large only |
#304D7C on #89B3D6 | Aa | 3.83:1 | AA large only |
#4F78A9 on #89B3D6 | Aa | 2.07:1 | Fail |
#89B3D6 on #E9F1F7 | Aa | 1.94:1 | Fail |
#304D7C on #4F78A9 | Aa | 1.85:1 | Fail |
Similar palettes 24 more in this mood
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#4F6B6C
#75A6A8
#A4E8EA
#DBF4F5
#BD5BD4
#8EC5FC
#E0C3FC
#FDFDFD
#E7F0FF
#6EB1FF
#267CB9
#434F58
#46399E
#5F68D3
#8CAAFC
#E3F2FD
#005479
#0081AB
#38BEE5
#E3F2FD
#0094DC
#7ACBF3
#CFCAFF
#FDFDFD
#638CCC
#A6C3E1
#D9CAE9
#FDFDFD
#183C85
#3681C7
#65B9F7
#F5FBFF
#0D47A1
#1976D2
#64B5F6
#E3F2FD
#A630C1
#755EF5
#7ABCFF
#80E6FF
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#023E8A
#0077B6
#00B4D8
#90E0EF
#D9ED92
#99D98C
#52B69A
#168AAD
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#00736B
#20A8BE
#66B6E9
#ABC7FF
#433069
#6B4281
#A77CAF
#EFE7F0
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#E7EAFF
#D8C7FF
#DCACDB
#C3A9B3
#3F71CC
#AE47D1
#B0A5FF
#40C1FF