#0D1B2A
#3C5374
#5A7A9E
#E0E1DD
#182538Ink
#4C5E82Dusk
#7B89B5Blue Gray
#B8D3DCPowder Blue
Blue Gray & Dusk Vibe is a analogous color palette tagged dark, muted, cold. Analogous neighbors on the wheel (Ink, Dusk, Blue Gray) 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 |
|---|---|---|---|---|---|
| Ink | #182538 | rgb(24, 37, 56) | hsl(216, 40%, 16%) | oklch(26.2% 0.040 258) | |
| Dusk | #4C5E82 | rgb(76, 94, 130) | hsl(220, 26%, 40%) | oklch(48.2% 0.062 264) | |
| Blue Gray | #7B89B5 | rgb(123, 137, 181) | hsl(226, 28%, 60%) | oklch(63.6% 0.068 271) | |
| Powder Blue | #B8D3DC | rgb(184, 211, 220) | hsl(195, 34%, 79%) | oklch(85.0% 0.032 220) |
Why it works and how to use it
With 4 chromatic colors, Blue Gray takes the lead while the rest support. Lightness runs from 16% to 79%. Well suited to websites, presentations and branding.
- Background: Powder Blue (#B8D3DC) is the lightest color, so it belongs on large surfaces.
- Text: Ink (#182538) on #B8D3DC gives 9.84:1, passing WCAG AAA.
- Primary: Blue Gray (#7B89B5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusk (#4C5E82) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Powder Blue at 9.84:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Blue Gray & Dusk Vibe
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
#182538
#4C5E82
#7B89B5
#B8D3DC
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#182538 on #B8D3DC | Aa | 9.84:1 | AAA |
#182538 on #7B89B5 | Aa | 4.47:1 | AA large only |
#4C5E82 on #B8D3DC | Aa | 4.14:1 | AA large only |
#182538 on #4C5E82 | Aa | 2.37:1 | Fail |
#7B89B5 on #B8D3DC | Aa | 2.2:1 | Fail |
#4C5E82 on #7B89B5 | Aa | 1.88:1 | Fail |
Similar palettes 24 more in this mood
#1C2541
#465D79
#5BC0BE
#FFFFFF
#00273E
#006975
#A6BDD0
#E9E9E9
#042034
#3F5A74
#8FA8BD
#C2D8EE
#020B25
#27446D
#C2AE91
#E3E0DB
#D0E3F8
#60799C
#365476
#1A1A18
#EEEAFF
#A599BB
#684579
#211A24
#C3D2FF
#006556
#131200
#F0F0F0
#001511
#18574D
#468A7C
#C0D0CC
#141E2E
#435872
#648BB5
#E2EAF2
#000613
#273D5D
#446386
#C5C6C2
#8CBDBF
#306788
#0D2445
#DAE3D7
#002531
#006879
#70B5B3
#CEDBD9
#0B2447
#3B5C9E
#6E86D6
#A5D7E8
#192C50
#384D87
#44688D
#74B6C9
#CFF3EB
#66A195
#266C5F
#1B2825
#292647
#5B5890
#A9A3D1
#F1F0F7
#3E2723
#6D4C41
#A1887F
#EFEBE9
#10002B
#5A189A
#9D4EDD
#E0AAFF
#0B2B26
#2F6B60
#5FA394
#DDEEE9
#03256C
#2541B2
#1768AC
#06BEE1
#03071E
#0B525B
#1B998B
#C2F970
#14233F
#405E89
#D8C4A6
#F8F5F0
#0D1F22
#345365
#7A9E7E
#E9F5DB