What are the hex codes in the Bold Blue Gray & Dusty Rose palette?

The Bold Blue Gray & Dusty Rose color palette consists of Blue Gray #68A4D2, Steel Blue #5181A8, Linen #F3F0E8, Dusty Rose #DAAD8C.

How should I use the Bold Blue Gray & Dusty Rose palette on a website?

Use Linen #F3F0E8 as the background, Steel Blue #5181A8 for text, Blue Gray #68A4D2 for buttons and links, and Dusty Rose #DAAD8C for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Bold Blue Gray & Dusty Rose have enough contrast for text?

The highest-contrast pair is #5181A8 on #F3F0E8 with a ratio of 3.65:1, which passes WCAG AA for large text only.

#68A4D2Blue Gray

#5181A8Steel Blue

#F3F0E8Linen

#DAAD8CDusty Rose

Bold Blue Gray & Dusty Rose color palette

Summer Muted Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Blue Gray	`#68A4D2`	`rgb(104, 164, 210)`	`hsl(206, 54%, 62%)`	`oklch(69.6% 0.092 243)`
Steel Blue	`#5181A8`	`rgb(81, 129, 168)`	`hsl(207, 35%, 49%)`	`oklch(58.5% 0.080 244)`
Linen	`#F3F0E8`	`rgb(243, 240, 232)`	`hsl(44, 31%, 93%)`	`oklch(95.5% 0.011 90)`
Dusty Rose	`#DAAD8C`	`rgb(218, 173, 140)`	`hsl(25, 51%, 70%)`	`oklch(78.0% 0.069 58)`

Why it works and how to use it

Bold Blue Gray & Dusty Rose is a complementary color palette tagged summer, muted, blue. Blue Gray and Dusty Rose sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. 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 49% to 93%. Well suited to websites, presentations and branding.

Background: Linen (#F3F0E8) is the lightest color, so it belongs on large surfaces.
Text: Steel Blue (#5181A8) on #F3F0E8 gives 3.65:1, enough for large headings only.
Primary: Blue Gray (#68A4D2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusty Rose (#DAAD8C) 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 Bold Blue Gray & Dusty Rose

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

#68A4D2

#5181A8

#F3F0E8

#DAAD8C

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
`#5181A8` on `#F3F0E8`	Aa	3.65:1	AA large only
`#68A4D2` on `#F3F0E8`	Aa	2.36:1	Fail
`#5181A8` on `#DAAD8C`	Aa	2.04:1	Fail
`#F3F0E8` on `#DAAD8C`	Aa	1.78:1	Fail
`#68A4D2` on `#5181A8`	Aa	1.55:1	Fail
`#68A4D2` on `#DAAD8C`	Aa	1.32:1	Fail

:root {
  --blue-gray: #68A4D2;
  --steel-blue: #5181A8;
  --linen: #F3F0E8;
  --dusty-rose: #DAAD8C;
}

$blue-gray: #68A4D2;
$steel-blue: #5181A8;
$linen: #F3F0E8;
$dusty-rose: #DAAD8C;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue-gray': '#68A4D2',
        'steel-blue': '#5181A8',
        'linen': '#F3F0E8',
        'dusty-rose': '#DAAD8C',
      },
    },
  },
};

{
  "name": "Bold Blue Gray & Dusty Rose",
  "colors": [
    "#68A4D2",
    "#5181A8",
    "#F3F0E8",
    "#DAAD8C"
  ]
}

background: linear-gradient(135deg, #68A4D2, #5181A8, #F3F0E8, #DAAD8C);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-04-09 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood