What are the hex codes in the Woven Periwinkle & Camel palette?

The Woven Periwinkle & Camel color palette consists of Steel Blue #5589A4, Camel #B59A69, Putty #D8C497, Periwinkle #CDC3FF.

How should I use the Woven Periwinkle & Camel palette on a website?

Use Periwinkle #CDC3FF as the background, Steel Blue #5589A4 for text, Putty #D8C497 for buttons and links, and Camel #B59A69 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Woven Periwinkle & Camel have enough contrast for text?

The highest-contrast pair is #5589A4 on #CDC3FF with a ratio of 2.34:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#5589A4Steel Blue

#B59A69Camel

#D8C497Putty

#CDC3FFPeriwinkle

Woven Periwinkle & Camel color palette

Boho Muted

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Steel Blue	`#5589A4`	`rgb(85, 137, 164)`	`hsl(201, 32%, 49%)`	`oklch(60.4% 0.069 232)`
Camel	`#B59A69`	`rgb(181, 154, 105)`	`hsl(39, 34%, 56%)`	`oklch(69.9% 0.073 82)`
Putty	`#D8C497`	`rgb(216, 196, 151)`	`hsl(42, 45%, 72%)`	`oklch(82.6% 0.064 87)`
Periwinkle	`#CDC3FF`	`rgb(205, 195, 255)`	`hsl(250, 100%, 88%)`	`oklch(84.6% 0.083 292)`

Why it works and how to use it

Woven Periwinkle & Camel is a complementary color palette tagged boho, muted. Near-complementary hues (about 162° 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.

It works because the lightness steps are gentle (49% to 88%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.

Background: Periwinkle (#CDC3FF) is the lightest color, so it belongs on large surfaces.
Text: Steel Blue (#5589A4) on #CDC3FF gives 2.34:1, so pair it with a darker neutral for body copy.
Primary: Putty (#D8C497) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Camel (#B59A69) 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 Woven Periwinkle & Camel

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

#5589A4

#B59A69

#D8C497

#CDC3FF

Color-blind check: under tritanopia, Putty and Periwinkle become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#5589A4` on `#CDC3FF`	Aa	2.34:1	Fail
`#5589A4` on `#D8C497`	Aa	2.23:1	Fail
`#B59A69` on `#CDC3FF`	Aa	1.65:1	Fail
`#B59A69` on `#D8C497`	Aa	1.57:1	Fail
`#5589A4` on `#B59A69`	Aa	1.42:1	Fail
`#D8C497` on `#CDC3FF`	Aa	1.05:1	Fail

:root {
  --steel-blue: #5589A4;
  --camel: #B59A69;
  --putty: #D8C497;
  --periwinkle: #CDC3FF;
}

$steel-blue: #5589A4;
$camel: #B59A69;
$putty: #D8C497;
$periwinkle: #CDC3FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'steel-blue': '#5589A4',
        'camel': '#B59A69',
        'putty': '#D8C497',
        'periwinkle': '#CDC3FF',
      },
    },
  },
};

{
  "name": "Woven Periwinkle & Camel",
  "colors": [
    "#5589A4",
    "#B59A69",
    "#D8C497",
    "#CDC3FF"
  ]
}

background: linear-gradient(135deg, #5589A4, #B59A69, #D8C497, #CDC3FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-07-16 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood