#222831
#575D65
#00ADB5
#EEEEEE
#1C2541Space
#465D79Dusk
#5BC0BEDusty Blue
#FFFFFFWhite
Powder & Steel is a analogous color palette tagged tech, modern, dark. Analogous neighbors on the wheel (Space, Dusk, Dusty Blue) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Space | #1C2541 | rgb(28, 37, 65) | hsl(225, 40%, 18%) | oklch(27.1% 0.054 269) | |
| Dusk | #465D79 | rgb(70, 93, 121) | hsl(213, 27%, 37%) | oklch(47.1% 0.054 254) | |
| Dusty Blue | #5BC0BE | rgb(91, 192, 190) | hsl(179, 44%, 55%) | oklch(74.7% 0.094 194) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | oklch(100.0% 0.000 0) |
Why it works and how to use it
With 3 chromatic colors, Dusty Blue takes the lead while the rest support. Lightness runs from 18% to 100%. Well suited to a SaaS landing page or dashboard.
- Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
- Text: Space (#1C2541) on #FFFFFF gives 15.1:1, passing WCAG AAA.
- Primary: Dusty Blue (#5BC0BE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusk (#465D79) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on White at 15.1:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Powder & Steel
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
#1C2541
#465D79
#5BC0BE
#FFFFFF
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#1C2541 on #FFFFFF | Aa | 15.1:1 | AAA |
#1C2541 on #5BC0BE | Aa | 7:1 | AAA |
#465D79 on #FFFFFF | Aa | 6.77:1 | AA |
#465D79 on #5BC0BE | Aa | 3.14:1 | AA large only |
#1C2541 on #465D79 | Aa | 2.23:1 | Fail |
#5BC0BE on #FFFFFF | Aa | 2.16:1 | Fail |
Similar palettes 24 more in this mood
#313B59
#617997
#7BDFDC
#FAFAFA
#0D1B2A
#3C5374
#5A7A9E
#E0E1DD
#3F4852
#78879C
#9CB0C7
#EEEFEC
#292647
#5B5890
#A9A3D1
#F1F0F7
#1F2E3E
#526A8C
#7697BD
#FAFBF7
#14213D
#FCA311
#E5E5E5
#FFFFFF
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#2B2D42
#8D99AE
#EDF2F4
#EF233C
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#161B22
#484E55
#F0B429
#E6EDF3
#0F172A
#444F64
#6366F1
#F8FAFC
#FAFAFA
#E5E7EB
#10B981
#111827
#0B0A12
#393751
#A78BFA
#ECE9FE
#FFFDFC
#EDE0DB
#FF6F61
#1F2933
#FFFFFF
#E4E4E3
#F59E0B
#1C1917
#FFF7F9
#EED8E0
#E11D74
#2B1720
#18213B
#526195
#7393C1
#ECFFFB
#E8F0F3
#E651B2
#3C5B67
#232F33
#1F1E27
#53516D
#BFADFF
#FAF9FF
#F0F3FC
#00C458
#4C5774
#090D18
#3B1752
#793EA4
#C493DF
#F1EFFC
#151515
#4E4E4E
#577AFF
#FAFAFA
#3E4551
#677287
#EDF3FE
#FFE2A8