Graphite to Admiral Blue color palette

303525Graphite F9D6DDLovely Breeze B3BDA3Meadow Morn AC7B92Never Forget 4A6881Admiral Blue

About this palette

Graphite to Admiral Blue is a 5-color muted, vintage palette: #303525 (Graphite), #F9D6DD (Lovely Breeze), #B3BDA3 (Meadow Morn), #AC7B92 (Never Forget), #4A6881 (Admiral Blue). It mixes gray, pink, green, blue tones and feels balanced overall. The strongest text pairing is #303525 on #F9D6DD with a contrast ratio of 9.44:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(48, 53, 37)	hsl(79, 18%, 18%)
Lovely Breeze	rgb(249, 214, 221)	hsl(348, 74%, 91%)
Meadow Morn	rgb(179, 189, 163)	hsl(83, 16%, 69%)
Never Forget	rgb(172, 123, 146)	hsl(332, 23%, 58%)
Admiral Blue	rgb(74, 104, 129)	hsl(207, 27%, 40%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa9.44:1 Very good#303525 on #F9D6DD
Aa9.44:1 Very good#F9D6DD on #303525
Aa6.45:1 Good#303525 on #B3BDA3
Aa6.45:1 Good#B3BDA3 on #303525
Aa4.37:1 Poor#F9D6DD on #4A6881
Aa4.37:1 Poor#4A6881 on #F9D6DD
Aa3.61:1 Poor#303525 on #AC7B92
Aa3.61:1 Poor#AC7B92 on #303525

Color blindness preview

CSS variables

/* Graphite to Admiral Blue — https://swatchly.xyz/palette/303525-f9d6dd-b3bda3-ac7b92-4a6881 */
:root {
  --graphite: #303525;
  --lovely-breeze: #f9d6dd;
  --meadow-morn: #b3bda3;
  --never-forget: #ac7b92;
  --admiral-blue: #4a6881;
}

Tailwind CSS v4

/* Graphite to Admiral Blue — https://swatchly.xyz/palette/303525-f9d6dd-b3bda3-ac7b92-4a6881 */
@theme {
  --color-graphite: #303525;
  --color-graphite-50: #f3f7ec;
  --color-graphite-100: #e9ede1;
  --color-graphite-200: #d5dacb;
  --color-graphite-300: #bec4b3;
  --color-graphite-400: #9ea492;
  --color-graphite-500: #838977;
  --color-graphite-600: #696e5d;
  --color-graphite-700: #525848;
  --color-graphite-800: #404436;
  --color-graphite-900: #303525;
  --color-graphite-950: #1e2018;
  --color-lovely-breeze: #f9d6dd;
  --color-lovely-breeze-50: #fffafb;
  --color-lovely-breeze-100: #ffeef1;
  --color-lovely-breeze-200: #f9d6dd;
  --color-lovely-breeze-300: #dcc0c5;
  --color-lovely-breeze-400: #bd9ea4;
  --color-lovely-breeze-500: #a08187;
  --color-lovely-breeze-600: #83656b;
  --color-lovely-breeze-700: #694e54;
  --color-lovely-breeze-800: #523b40;
  --color-lovely-breeze-900: #402d31;
  --color-lovely-breeze-950: #291b1e;
  --color-meadow-morn: #b3bda3;
  --color-meadow-morn-50: #edf3e4;
  --color-meadow-morn-100: #e2e8d7;
  --color-meadow-morn-200: #ccd4bf;
  --color-meadow-morn-300: #b3bda3;
  --color-meadow-morn-400: #969f86;
  --color-meadow-morn-500: #7c856d;
  --color-meadow-morn-600: #636c55;
  --color-meadow-morn-700: #4f5641;
  --color-meadow-morn-800: #3d4432;
  --color-meadow-morn-900: #303526;
  --color-meadow-morn-950: #1d2116;
  --color-never-forget: #ac7b92;
  --color-never-forget-50: #fff2f8;
  --color-never-forget-100: #ffe5f0;
  --color-never-forget-200: #f5cedf;
  --color-never-forget-300: #e3b6ca;
  --color-never-forget-400: #c696ac;
  --color-never-forget-500: #ac7b92;
  --color-never-forget-600: #8f6076;
  --color-never-forget-700: #744a5e;
  --color-never-forget-800: #5c384a;
  --color-never-forget-900: #482938;
  --color-never-forget-950: #2e1823;
  --color-admiral-blue: #4a6881;
  --color-admiral-blue-50: #edf7ff;
  --color-admiral-blue-100: #d8edff;
  --color-admiral-blue-200: #bfd8ee;
  --color-admiral-blue-300: #a4c1d9;
  --color-admiral-blue-400: #81a0bb;
  --color-admiral-blue-500: #65849e;
  --color-admiral-blue-600: #4a6881;
  --color-admiral-blue-700: #385268;
  --color-admiral-blue-800: #2a4053;
  --color-admiral-blue-900: #1e3242;
  --color-admiral-blue-950: #111f2a;
}