Pale King’s Blue to Nightmare color palette

B0F5DFPale King’s Blue 44C1A1Macau BB6F97Pinky Pickle 8F3868Pink Horror 6C223ASiren 002319Nightmare

Open in generator Export PNG, PDF, ASE…

About this palette

Pale King’s Blue to Nightmare is a 6-color vintage palette: #B0F5DF (Pale King’s Blue), #44C1A1 (Macau), #BB6F97 (Pinky Pickle), #8F3868 (Pink Horror), #6C223A (Siren), #002319 (Nightmare). It mixes turquoise, pink, red tones and feels balanced overall. The strongest text pairing is #B0F5DF on #002319 with a contrast ratio of 13.53:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pale King’s Blue	rgb(176, 245, 223)	hsl(161, 78%, 83%)
Macau	rgb(68, 193, 161)	hsl(165, 50%, 51%)
Pinky Pickle	rgb(187, 111, 151)	hsl(328, 36%, 58%)
Pink Horror	rgb(143, 56, 104)	hsl(327, 44%, 39%)
Siren	rgb(108, 34, 58)	hsl(341, 52%, 28%)
Nightmare	rgb(0, 35, 25)	hsl(163, 100%, 7%)

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.

Aa13.53:1 Super#B0F5DF on #002319
Aa13.53:1 Super#002319 on #B0F5DF
Aa8.81:1 Very good#B0F5DF on #6C223A
Aa8.81:1 Very good#6C223A on #B0F5DF
Aa7.48:1 Very good#44C1A1 on #002319
Aa7.48:1 Very good#002319 on #44C1A1
Aa5.79:1 Good#B0F5DF on #8F3868
Aa5.79:1 Good#8F3868 on #B0F5DF

Color blindness preview

CSS variables

/* Pale King’s Blue to Nightmare — https://swatchly.xyz/palette/b0f5df-44c1a1-bb6f97-8f3868-6c223a-002319 */
:root {
  --pale-king-s-blue: #b0f5df;
  --macau: #44c1a1;
  --pinky-pickle: #bb6f97;
  --pink-horror: #8f3868;
  --siren: #6c223a;
  --nightmare: #002319;
}

Tailwind CSS v4

/* Pale King’s Blue to Nightmare — https://swatchly.xyz/palette/b0f5df-44c1a1-bb6f97-8f3868-6c223a-002319 */
@theme {
  --color-pale-king-s-blue: #b0f5df;
  --color-pale-king-s-blue-50: #d2f9ec;
  --color-pale-king-s-blue-100: #b0f5df;
  --color-pale-king-s-blue-200: #abdfce;
  --color-pale-king-s-blue-300: #90cbb8;
  --color-pale-king-s-blue-400: #6dad9a;
  --color-pale-king-s-blue-500: #50937f;
  --color-pale-king-s-blue-600: #377966;
  --color-pale-king-s-blue-700: #236251;
  --color-pale-king-s-blue-800: #144d3f;
  --color-pale-king-s-blue-900: #0a3c30;
  --color-pale-king-s-blue-950: #03261d;
  --color-macau: #44c1a1;
  --color-macau-50: #e4fff6;
  --color-macau-100: #c0ffea;
  --color-macau-200: #a1f0d7;
  --color-macau-300: #7fdcc1;
  --color-macau-400: #44c1a1;
  --color-macau-500: #17a385;
  --color-macau-600: #00846a;
  --color-macau-700: #006853;
  --color-macau-800: #005140;
  --color-macau-900: #003e30;
  --color-macau-950: #00261d;
  --color-pinky-pickle: #bb6f97;
  --color-pinky-pickle-50: #fff2f8;
  --color-pinky-pickle-100: #ffe5f1;
  --color-pinky-pickle-200: #ffc8e3;
  --color-pinky-pickle-300: #f1adcf;
  --color-pinky-pickle-400: #d68bb1;
  --color-pinky-pickle-500: #bb6f97;
  --color-pinky-pickle-600: #9c547b;
  --color-pinky-pickle-700: #803e62;
  --color-pinky-pickle-800: #672d4d;
  --color-pinky-pickle-900: #51203c;
  --color-pinky-pickle-950: #341125;
  --color-pink-horror: #8f3868;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2ef;
  --color-pink-horror-200: #ffc6e1;
  --color-pink-horror-300: #f9a6cf;
  --color-pink-horror-400: #de84b2;
  --color-pink-horror-500: #c46898;
  --color-pink-horror-600: #a74f7e;
  --color-pink-horror-700: #8f3868;
  --color-pink-horror-800: #722952;
  --color-pink-horror-900: #5b1c3f;
  --color-pink-horror-950: #3c0e28;
  --color-siren: #6c223a;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3e9;
  --color-siren-200: #ffc6d2;
  --color-siren-300: #f4a8ba;
  --color-siren-400: #d78599;
  --color-siren-500: #ba687e;
  --color-siren-600: #9c4e63;
  --color-siren-700: #7f394d;
  --color-siren-800: #6c223a;
  --color-siren-900: #501d2d;
  --color-siren-950: #34101b;
  --color-nightmare: #002319;
  --color-nightmare-50: #e6fbf2;
  --color-nightmare-100: #daf2e8;
  --color-nightmare-200: #c3dfd4;
  --color-nightmare-300: #a9c9bd;
  --color-nightmare-400: #87ab9d;
  --color-nightmare-500: #6b8f81;
  --color-nightmare-600: #517367;
  --color-nightmare-700: #3c5b50;
  --color-nightmare-800: #2b473d;
  --color-nightmare-900: #1f362e;
  --color-nightmare-950: #002319;
}