#585881
#4F748D
#B69ED1
#8FB2F0
#5D6038Juniper
#9D7E6CMocha
#7590C2Blue Gray
#82B0E6Dusty Blue
Worn Dusty Blue & Juniper is a complementary color palette tagged vintage, retro, muted. Near-complementary hues (about 170° 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 |
|---|---|---|---|---|---|
| Juniper | #5D6038 | rgb(93, 96, 56) | hsl(65, 26%, 30%) | oklch(47.6% 0.059 112) | |
| Mocha | #9D7E6C | rgb(157, 126, 108) | hsl(22, 20%, 52%) | oklch(61.8% 0.047 52) | |
| Blue Gray | #7590C2 | rgb(117, 144, 194) | hsl(219, 39%, 61%) | oklch(65.2% 0.081 262) | |
| Dusty Blue | #82B0E6 | rgb(130, 176, 230) | hsl(212, 67%, 71%) | oklch(74.5% 0.093 253) |
Why it works and how to use it
With 4 chromatic colors, Blue Gray takes the lead while the rest support. Lightness runs from 30% to 71%. Well suited to websites, presentations and branding.
- Background: Dusty Blue (#82B0E6) is the lightest color, so it belongs on large surfaces.
- Text: Juniper (#5D6038) on #82B0E6 gives 2.91:1, so pair it with a darker neutral for body copy.
- Primary: Blue Gray (#7590C2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Mocha (#9D7E6C) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Worn Dusty Blue & Juniper
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
#5D6038
#9D7E6C
#7590C2
#82B0E6
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#5D6038 on #82B0E6 | Aa | 2.91:1 | Fail |
#5D6038 on #7590C2 | Aa | 2.04:1 | Fail |
#5D6038 on #9D7E6C | Aa | 1.76:1 | Fail |
#9D7E6C on #82B0E6 | Aa | 1.65:1 | Fail |
#7590C2 on #82B0E6 | Aa | 1.43:1 | Fail |
#9D7E6C on #7590C2 | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#7071CC
#00918B
#4E91D5
#4EBBDB
#9AD3FF
#64E1AB
#00CBC3
#008BA3
#C898D0
#7DA693
#636144
#664C73
#026579
#229393
#70BEA6
#9DC2DE
#A694D2
#BF768E
#6879A2
#724370
#008B6D
#6C8B38
#00CFCB
#86D894
#A1CC93
#AAA9C7
#BA955A
#7C7A95
#A17669
#B1809F
#BE8A57
#EEA1AD
#814160
#5C609A
#886E88
#B7ABCA
#3B684F
#855D7A
#B47798
#88BA9B
#825A7D
#C27C6A
#D598A7
#CEAA85
#3B8185
#C29D9B
#57B9BF
#E5ACB2
#DA99BB
#6FBEC0
#B79281
#246D72
#0D7580
#846160
#BA8B86
#8FB5BA
#CAAB80
#B193A4
#A46268
#874A2D
#3F777C
#76B7BD
#EFE2C7
#FFFAF0
#874658
#A0584E
#94856B
#DCA885
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#245E63
#5A9AA0
#D7CBB0
#F5F0E6
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#22223B
#595D79
#9A8C98
#F2E9E4
#4B3832
#854442
#BE9B7B
#FFF4E6