What are the hex codes in the Worn Dusty Blue & Juniper palette?

The Worn Dusty Blue & Juniper color palette consists of Juniper #5D6038, Mocha #9D7E6C, Blue Gray #7590C2, Dusty Blue #82B0E6.

How should I use the Worn Dusty Blue & Juniper palette on a website?

Use Dusty Blue #82B0E6 as the background, Juniper #5D6038 for text, Blue Gray #7590C2 for buttons and links, and Mocha #9D7E6C for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Worn Dusty Blue & Juniper have enough contrast for text?

The highest-contrast pair is #5D6038 on #82B0E6 with a ratio of 2.91:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#5D6038Juniper

#9D7E6CMocha

#7590C2Blue Gray

#82B0E6Dusty Blue

Worn Dusty Blue & Juniper color palette

Vintage Retro Muted Cold Blue

Color codes click any value to copy

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

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.

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 Secondary

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.

Palette card

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

:root {
  --juniper: #5D6038;
  --mocha: #9D7E6C;
  --blue-gray: #7590C2;
  --dusty-blue: #82B0E6;
}

$juniper: #5D6038;
$mocha: #9D7E6C;
$blue-gray: #7590C2;
$dusty-blue: #82B0E6;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'juniper': '#5D6038',
        'mocha': '#9D7E6C',
        'blue-gray': '#7590C2',
        'dusty-blue': '#82B0E6',
      },
    },
  },
};

{
  "name": "Worn Dusty Blue & Juniper",
  "colors": [
    "#5D6038",
    "#9D7E6C",
    "#7590C2",
    "#82B0E6"
  ]
}

background: linear-gradient(135deg, #5D6038, #9D7E6C, #7590C2, #82B0E6);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-12 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood