Pale King’s Blue to Secret Passage color palette

ACF9E8Pale King’s Blue 7F4E62Nocturne Red CFB686Link to the Past 6E91BDKing Neptune 372400Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Pale King’s Blue to Secret Passage is a 5-color warm, vintage palette: #ACF9E8 (Pale King’s Blue), #7F4E62 (Nocturne Red), #CFB686 (Link to the Past), #6E91BD (King Neptune), #372400 (Secret Passage). It mixes turquoise, red, yellow, blue, brown tones and feels warm overall. The strongest text pairing is #ACF9E8 on #372400 with a contrast ratio of 12.35:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pale King’s Blue	rgb(172, 249, 232)	hsl(167, 87%, 83%)
Nocturne Red	rgb(127, 78, 98)	hsl(336, 24%, 40%)
Link to the Past	rgb(207, 182, 134)	hsl(39, 43%, 67%)
King Neptune	rgb(110, 145, 189)	hsl(213, 37%, 59%)
Secret Passage	rgb(55, 36, 0)	hsl(39, 100%, 11%)

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.

Aa12.35:1 Super#ACF9E8 on #372400
Aa12.35:1 Super#372400 on #ACF9E8
Aa7.55:1 Very good#CFB686 on #372400
Aa7.55:1 Very good#372400 on #CFB686
Aa5.51:1 Good#ACF9E8 on #7F4E62
Aa5.51:1 Good#7F4E62 on #ACF9E8
Aa4.56:1 Good#6E91BD on #372400
Aa4.56:1 Good#372400 on #6E91BD

Color blindness preview

CSS variables

/* Pale King’s Blue to Secret Passage — https://swatchly.xyz/palette/acf9e8-7f4e62-cfb686-6e91bd-372400 */
:root {
  --pale-king-s-blue: #acf9e8;
  --nocturne-red: #7f4e62;
  --link-to-the-past: #cfb686;
  --king-neptune: #6e91bd;
  --secret-passage: #372400;
}

Tailwind CSS v4

/* Pale King’s Blue to Secret Passage — https://swatchly.xyz/palette/acf9e8-7f4e62-cfb686-6e91bd-372400 */
@theme {
  --color-pale-king-s-blue: #acf9e8;
  --color-pale-king-s-blue-50: #d2fcf2;
  --color-pale-king-s-blue-100: #acf9e8;
  --color-pale-king-s-blue-200: #a9e2d5;
  --color-pale-king-s-blue-300: #8dcdbf;
  --color-pale-king-s-blue-400: #67afa0;
  --color-pale-king-s-blue-500: #499586;
  --color-pale-king-s-blue-600: #2e7a6c;
  --color-pale-king-s-blue-700: #186256;
  --color-pale-king-s-blue-800: #074e43;
  --color-pale-king-s-blue-900: #003c33;
  --color-pale-king-s-blue-950: #002620;
  --color-nocturne-red: #7f4e62;
  --color-nocturne-red-50: #fff1f6;
  --color-nocturne-red-100: #ffe2ed;
  --color-nocturne-red-200: #f6ccdc;
  --color-nocturne-red-300: #e5b5c7;
  --color-nocturne-red-400: #ca96aa;
  --color-nocturne-red-500: #b07c90;
  --color-nocturne-red-600: #966377;
  --color-nocturne-red-700: #7f4e62;
  --color-nocturne-red-800: #653c4d;
  --color-nocturne-red-900: #4f2c3b;
  --color-nocturne-red-950: #341a25;
  --color-link-to-the-past: #cfb686;
  --color-link-to-the-past-50: #feefd3;
  --color-link-to-the-past-100: #f5e4c4;
  --color-link-to-the-past-200: #e2cfa9;
  --color-link-to-the-past-300: #cfb686;
  --color-link-to-the-past-400: #b0986a;
  --color-link-to-the-past-500: #967e50;
  --color-link-to-the-past-600: #7b6538;
  --color-link-to-the-past-700: #645027;
  --color-link-to-the-past-800: #503e1a;
  --color-link-to-the-past-900: #3f3010;
  --color-link-to-the-past-950: #281d07;
  --color-king-neptune: #6e91bd;
  --color-king-neptune-50: #f1f7ff;
  --color-king-neptune-100: #e3f0ff;
  --color-king-neptune-200: #c5dfff;
  --color-king-neptune-300: #abcaf0;
  --color-king-neptune-400: #8aabd6;
  --color-king-neptune-500: #6e91bd;
  --color-king-neptune-600: #53759f;
  --color-king-neptune-700: #3d5c82;
  --color-king-neptune-800: #2c4769;
  --color-king-neptune-900: #1f3653;
  --color-king-neptune-950: #112135;
  --color-secret-passage: #372400;
  --color-secret-passage-50: #fff4e2;
  --color-secret-passage-100: #f8e9d1;
  --color-secret-passage-200: #e7d5b9;
  --color-secret-passage-300: #d2be9e;
  --color-secret-passage-400: #b49e7b;
  --color-secret-passage-500: #9b8460;
  --color-secret-passage-600: #816c49;
  --color-secret-passage-700: #6b5737;
  --color-secret-passage-800: #584628;
  --color-secret-passage-900: #48381e;
  --color-secret-passage-950: #372400;
}