Pastel Pink to Dark Orchestra Color Palette

About this palette

Pastel Pink to Dark Orchestra is a 5-color muted, cool palette: #DF9FA4 (Pastel Pink), #4F8A8D (Arctic), #BEE0DE (Poolside), #1B5453 (Cape Verde), #2A191B (Dark Orchestra). It mixes red, turquoise, gray tones and feels cool overall. The strongest text pairing is #BEE0DE on #2A191B with a contrast ratio of 11.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Pink	rgb(223, 159, 164)	hsl(355, 50%, 75%)
Arctic	rgb(79, 138, 141)	hsl(183, 28%, 43%)
Poolside	rgb(190, 224, 222)	hsl(176, 35%, 81%)
Cape Verde	rgb(27, 84, 83)	hsl(179, 51%, 22%)
Dark Orchestra	rgb(42, 25, 27)	hsl(353, 25%, 13%)

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.

Aa11.89:1 Very good#BEE0DE on #2A191B
Aa11.89:1 Very good#2A191B on #BEE0DE
Aa7.69:1 Very good#DF9FA4 on #2A191B
Aa7.69:1 Very good#2A191B on #DF9FA4
Aa6.11:1 Good#BEE0DE on #1B5453
Aa6.11:1 Good#1B5453 on #BEE0DE
Aa4.27:1 Poor#4F8A8D on #2A191B
Aa4.27:1 Poor#2A191B on #4F8A8D

Color blindness preview

CSS variables

/* Pastel Pink to Dark Orchestra — https://swatchly.xyz/palette/df9fa4-4f8a8d-bee0de-1b5453-2a191b */
:root {
  --pastel-pink: #df9fa4;
  --arctic: #4f8a8d;
  --poolside: #bee0de;
  --cape-verde: #1b5453;
  --dark-orchestra: #2a191b;
}

Tailwind CSS v4

/* Pastel Pink to Dark Orchestra — https://swatchly.xyz/palette/df9fa4-4f8a8d-bee0de-1b5453-2a191b */
@theme {
  --color-pastel-pink: #df9fa4;
  --color-pastel-pink-50: #ffe7e8;
  --color-pastel-pink-100: #ffd5d8;
  --color-pastel-pink-200: #f1bcbf;
  --color-pastel-pink-300: #df9fa4;
  --color-pastel-pink-400: #c08388;
  --color-pastel-pink-500: #a66a6f;
  --color-pastel-pink-600: #8b5358;
  --color-pastel-pink-700: #724045;
  --color-pastel-pink-800: #5d3236;
  --color-pastel-pink-900: #4c262a;
  --color-pastel-pink-950: #311619;
  --color-arctic: #4f8a8d;
  --color-arctic-50: #dafbfd;
  --color-arctic-100: #cbf1f3;
  --color-arctic-200: #b0dddf;
  --color-arctic-300: #93c7c9;
  --color-arctic-400: #6da7aa;
  --color-arctic-500: #4f8a8d;
  --color-arctic-600: #377073;
  --color-arctic-700: #255a5d;
  --color-arctic-800: #174749;
  --color-arctic-900: #0e373a;
  --color-arctic-950: #052325;
  --color-poolside: #bee0de;
  --color-poolside-50: #e7faf9;
  --color-poolside-100: #dcf1ef;
  --color-poolside-200: #bee0de;
  --color-poolside-300: #acc8c6;
  --color-poolside-400: #8aa9a7;
  --color-poolside-500: #6e8e8c;
  --color-poolside-600: #547371;
  --color-poolside-700: #405b5a;
  --color-poolside-800: #2f4846;
  --color-poolside-900: #233736;
  --color-poolside-950: #132222;
  --color-cape-verde: #1b5453;
  --color-cape-verde-50: #defcfb;
  --color-cape-verde-100: #d1f3f2;
  --color-cape-verde-200: #b8e1df;
  --color-cape-verde-300: #9ecdcb;
  --color-cape-verde-400: #7bb0ae;
  --color-cape-verde-500: #5f9694;
  --color-cape-verde-600: #467c7b;
  --color-cape-verde-700: #336665;
  --color-cape-verde-800: #1b5453;
  --color-cape-verde-900: #174040;
  --color-cape-verde-950: #0a2929;
  --color-dark-orchestra: #2a191b;
  --color-dark-orchestra-50: #fff1f2;
  --color-dark-orchestra-100: #f6e7e8;
  --color-dark-orchestra-200: #e5d2d4;
  --color-dark-orchestra-300: #d0bbbd;
  --color-dark-orchestra-400: #b19b9d;
  --color-dark-orchestra-500: #968082;
  --color-dark-orchestra-600: #7a6567;
  --color-dark-orchestra-700: #624f51;
  --color-dark-orchestra-800: #4d3d3e;
  --color-dark-orchestra-900: #3c2e2f;
  --color-dark-orchestra-950: #2a191b;
}