What are the hex codes in the Cadet & Powder Blue Vibe palette?

The Cadet & Powder Blue Vibe color palette consists of Smoke #EAF8F9, Powder Blue #B5DCDF, Cadet #64A0A6, Gunmetal #23393C.

How should I use the Cadet & Powder Blue Vibe palette on a website?

Use Smoke #EAF8F9 as the background, Gunmetal #23393C for text, Powder Blue #B5DCDF for buttons and links, and Cadet #64A0A6 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Gunmetal at 11.2:1.

Which colors in Cadet & Powder Blue Vibe have enough contrast for text?

The highest-contrast pair is #EAF8F9 on #23393C with a ratio of 11.2:1, which passes WCAG AA for normal text.

#EAF8F9Smoke

#B5DCDFPowder Blue

#64A0A6Cadet

#23393CGunmetal

Cadet & Powder Blue Vibe color palette

Muted Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#EAF8F9`	`rgb(234, 248, 249)`	`hsl(184, 56%, 95%)`	`oklch(96.9% 0.015 202)`
Powder Blue	`#B5DCDF`	`rgb(181, 220, 223)`	`hsl(184, 40%, 79%)`	`oklch(86.8% 0.041 202)`
Cadet	`#64A0A6`	`rgb(100, 160, 166)`	`hsl(185, 27%, 52%)`	`oklch(66.7% 0.063 204)`
Gunmetal	`#23393C`	`rgb(35, 57, 60)`	`hsl(187, 26%, 19%)`	`oklch(32.8% 0.028 207)`

Why it works and how to use it

Cadet & Powder Blue Vibe is a monochromatic color palette tagged muted, minimal, white. A monochromatic set: the same hue family from Gunmetal down to Smoke. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

With 3 chromatic colors, Powder Blue takes the lead while the rest support. Lightness runs from 19% to 95%. Well suited to websites, presentations and branding.

Background: Smoke (#EAF8F9) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#23393C) on #EAF8F9 gives 11.2:1, passing WCAG AAA.
Primary: Powder Blue (#B5DCDF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cadet (#64A0A6) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Gunmetal at 11.2:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Cadet & Powder Blue Vibe

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

#EAF8F9

#B5DCDF

#64A0A6

#23393C

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
`#EAF8F9` on `#23393C`	Aa	11.2:1	AAA
`#B5DCDF` on `#23393C`	Aa	8.29:1	AAA
`#64A0A6` on `#23393C`	Aa	4.14:1	AA large only
`#EAF8F9` on `#64A0A6`	Aa	2.71:1	Fail
`#B5DCDF` on `#64A0A6`	Aa	2:1	Fail
`#EAF8F9` on `#B5DCDF`	Aa	1.35:1	Fail

:root {
  --smoke: #EAF8F9;
  --powder-blue: #B5DCDF;
  --cadet: #64A0A6;
  --gunmetal: #23393C;
}

$smoke: #EAF8F9;
$powder-blue: #B5DCDF;
$cadet: #64A0A6;
$gunmetal: #23393C;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'smoke': '#EAF8F9',
        'powder-blue': '#B5DCDF',
        'cadet': '#64A0A6',
        'gunmetal': '#23393C',
      },
    },
  },
};

{
  "name": "Cadet & Powder Blue Vibe",
  "colors": [
    "#EAF8F9",
    "#B5DCDF",
    "#64A0A6",
    "#23393C"
  ]
}

background: linear-gradient(135deg, #EAF8F9, #B5DCDF, #64A0A6, #23393C);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-08-12 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood