Night Kite to Pink Swirl Color Palette

About this palette

Night Kite to Pink Swirl is a 5-color cool palette: #005671 (Night Kite), #17101E (Corbeau), #00839F (Ahoy! Blue), #87B562 (Broccoli), #FFECE7 (Pink Swirl). It mixes blue, black, green, white tones and feels cool overall. The strongest text pairing is #17101E on #FFECE7 with a contrast ratio of 16.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Kite	rgb(0, 86, 113)	hsl(194, 100%, 22%)
Corbeau	rgb(23, 16, 30)	hsl(270, 30%, 9%)
Ahoy! Blue	rgb(0, 131, 159)	hsl(191, 100%, 31%)
Broccoli	rgb(135, 181, 98)	hsl(93, 36%, 55%)
Pink Swirl	rgb(255, 236, 231)	hsl(13, 100%, 95%)

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.

Aa16.30:1 Super#17101E on #FFECE7
Aa16.30:1 Super#FFECE7 on #17101E
Aa7.81:1 Very good#17101E on #87B562
Aa7.81:1 Very good#87B562 on #17101E
Aa7.16:1 Very good#005671 on #FFECE7
Aa7.16:1 Very good#FFECE7 on #005671
Aa4.20:1 Poor#17101E on #00839F
Aa4.20:1 Poor#00839F on #17101E

Color blindness preview

CSS variables

/* Night Kite to Pink Swirl — https://swatchly.xyz/palette/005671-17101e-00839f-87b562-ffece7 */
:root {
  --night-kite: #005671;
  --corbeau: #17101e;
  --ahoy-blue: #00839f;
  --broccoli: #87b562;
  --pink-swirl: #ffece7;
}

Tailwind CSS v4

/* Night Kite to Pink Swirl — https://swatchly.xyz/palette/005671-17101e-00839f-87b562-ffece7 */
@theme {
  --color-night-kite: #005671;
  --color-night-kite-50: #e9f8ff;
  --color-night-kite-100: #d3f1ff;
  --color-night-kite-200: #acdff6;
  --color-night-kite-300: #8dc8e2;
  --color-night-kite-400: #65a7c4;
  --color-night-kite-500: #458ba8;
  --color-night-kite-600: #2a6e89;
  --color-night-kite-700: #005671;
  --color-night-kite-800: #064358;
  --color-night-kite-900: #013445;
  --color-night-kite-950: #00202c;
  --color-corbeau: #17101e;
  --color-corbeau-50: #f8f2fe;
  --color-corbeau-100: #eee8f5;
  --color-corbeau-200: #dbd4e3;
  --color-corbeau-300: #c5bdce;
  --color-corbeau-400: #a69db0;
  --color-corbeau-500: #887f92;
  --color-corbeau-600: #6b6374;
  --color-corbeau-700: #524b5a;
  --color-corbeau-800: #3d3743;
  --color-corbeau-900: #2b2630;
  --color-corbeau-950: #17101e;
  --color-ahoy-blue: #00839f;
  --color-ahoy-blue-50: #e7f9ff;
  --color-ahoy-blue-100: #d2f4ff;
  --color-ahoy-blue-200: #a4e7fd;
  --color-ahoy-blue-300: #85d4ed;
  --color-ahoy-blue-400: #59b7d2;
  --color-ahoy-blue-500: #349db9;
  --color-ahoy-blue-600: #00839f;
  --color-ahoy-blue-700: #00687f;
  --color-ahoy-blue-800: #005164;
  --color-ahoy-blue-900: #003e4d;
  --color-ahoy-blue-950: #002731;
  --color-broccoli: #87b562;
  --color-broccoli-50: #e8ffd9;
  --color-broccoli-100: #daf8c5;
  --color-broccoli-200: #c4e7aa;
  --color-broccoli-300: #aad28c;
  --color-broccoli-400: #87b562;
  --color-broccoli-500: #6c9846;
  --color-broccoli-600: #527c2a;
  --color-broccoli-700: #3d6315;
  --color-broccoli-800: #2d4e05;
  --color-broccoli-900: #203c00;
  --color-broccoli-950: #122500;
  --color-pink-swirl: #ffece7;
  --color-pink-swirl-50: #ffece7;
  --color-pink-swirl-100: #f1e4e1;
  --color-pink-swirl-200: #dfd1cd;
  --color-pink-swirl-300: #cbbbb7;
  --color-pink-swirl-400: #ad9c97;
  --color-pink-swirl-500: #92817d;
  --color-pink-swirl-600: #786863;
  --color-pink-swirl-700: #60524e;
  --color-pink-swirl-800: #4c3f3c;
  --color-pink-swirl-900: #3b302d;
  --color-pink-swirl-950: #251d1b;
}