#026579
#229393
#70BEA6
#9DC2DE
#0D7580Pine
#846160Cocoa
#BA8B86Dust
#8FB5BADusty Blue
Dusty Pine & Dust is a complementary color palette tagged vintage, retro, muted. Near-complementary hues (about 180° 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 |
|---|---|---|---|---|---|
| Pine | #0D7580 | rgb(13, 117, 128) | hsl(186, 82%, 28%) | oklch(51.5% 0.085 207) | |
| Cocoa | #846160 | rgb(132, 97, 96) | hsl(2, 16%, 45%) | oklch(52.8% 0.046 21) | |
| Dust | #BA8B86 | rgb(186, 139, 134) | hsl(6, 27%, 63%) | oklch(68.1% 0.058 26) | |
| Dusty Blue | #8FB5BA | rgb(143, 181, 186) | hsl(187, 24%, 65%) | oklch(74.7% 0.042 206) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (65% down to 28% lightness). A natural fit for websites, presentations and branding.
- Background: Dusty Blue (#8FB5BA) is the lightest color, so it belongs on large surfaces.
- Text: Cocoa (#846160) on #8FB5BA gives 2.46:1, so pair it with a darker neutral for body copy.
- Primary: Pine (#0D7580) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dust (#BA8B86) 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 Dusty Pine & Dust
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
#0D7580
#846160
#BA8B86
#8FB5BA
Color-blind check: under protanopia and deuteranopia, Pine and Cocoa 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 |
|---|---|---|---|
#846160 on #8FB5BA | Aa | 2.46:1 | Fail |
#0D7580 on #8FB5BA | Aa | 2.45:1 | Fail |
#846160 on #BA8B86 | Aa | 1.85:1 | Fail |
#0D7580 on #BA8B86 | Aa | 1.84:1 | Fail |
#BA8B86 on #8FB5BA | Aa | 1.33:1 | Fail |
#0D7580 on #846160 | Aa | 1:1 | Fail |
Similar palettes 24 more in this mood
#3B8185
#C29D9B
#57B9BF
#E5ACB2
#DA99BB
#6FBEC0
#B79281
#246D72
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#7071CC
#00918B
#4E91D5
#4EBBDB
#A694D2
#BF768E
#6879A2
#724370
#008B6D
#6C8B38
#00CFCB
#86D894
#585881
#4F748D
#B69ED1
#8FB2F0
#A1CC93
#AAA9C7
#BA955A
#7C7A95
#C898D0
#7DA693
#636144
#664C73
#A17669
#B1809F
#BE8A57
#EEA1AD
#814160
#5C609A
#886E88
#B7ABCA
#3B684F
#855D7A
#B47798
#88BA9B
#5D6038
#9D7E6C
#7590C2
#82B0E6
#825A7D
#C27C6A
#D598A7
#CEAA85
#CAAB80
#B193A4
#A46268
#874A2D
#874658
#A0584E
#94856B
#DCA885
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#22223B
#595D79
#9A8C98
#F2E9E4
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#4A4E4D
#0E9AA7
#8FD3D6
#F6CD61
#A88577
#E4C1AB
#FFEFD7
#719080