Avant-Garde Pink to Walkie Chalkie color palette

F47AE5Avant-Garde Pink 005568Plunge 99800ECaptain Kirk 002225Sunken Ship FFF5FCWalkie Chalkie

About this palette

Avant-Garde Pink to Walkie Chalkie is a 5-color vintage palette: #F47AE5 (Avant-Garde Pink), #005568 (Plunge), #99800E (Captain Kirk), #002225 (Sunken Ship), #FFF5FC (Walkie Chalkie). It mixes pink, blue, yellow, turquoise, white tones and feels balanced overall. The strongest text pairing is #002225 on #FFF5FC with a contrast ratio of 15.71:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Avant-Garde Pink	rgb(244, 122, 229)	hsl(307, 85%, 72%)
Plunge	rgb(0, 85, 104)	hsl(191, 100%, 20%)
Captain Kirk	rgb(153, 128, 14)	hsl(49, 83%, 33%)
Sunken Ship	rgb(0, 34, 37)	hsl(185, 100%, 7%)
Walkie Chalkie	rgb(255, 245, 252)	hsl(318, 100%, 98%)

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.

Aa15.71:1 Super#002225 on #FFF5FC
Aa15.71:1 Super#FFF5FC on #002225
Aa7.89:1 Very good#005568 on #FFF5FC
Aa7.89:1 Very good#FFF5FC on #005568
Aa6.98:1 Good#F47AE5 on #002225
Aa6.98:1 Good#002225 on #F47AE5
Aa4.34:1 Poor#99800E on #002225
Aa4.34:1 Poor#002225 on #99800E

Color blindness preview

CSS variables

/* Avant-Garde Pink to Walkie Chalkie — https://swatchly.xyz/palette/f47ae5-005568-99800e-002225-fff5fc */
:root {
  --avant-garde-pink: #f47ae5;
  --plunge: #005568;
  --captain-kirk: #99800e;
  --sunken-ship: #002225;
  --walkie-chalkie: #fff5fc;
}

Tailwind CSS v4

/* Avant-Garde Pink to Walkie Chalkie — https://swatchly.xyz/palette/f47ae5-005568-99800e-002225-fff5fc */
@theme {
  --color-avant-garde-pink: #f47ae5;
  --color-avant-garde-pink-50: #fff7fd;
  --color-avant-garde-pink-100: #ffecfb;
  --color-avant-garde-pink-200: #ffd0f7;
  --color-avant-garde-pink-300: #ffacf3;
  --color-avant-garde-pink-400: #f47ae5;
  --color-avant-garde-pink-500: #d25cc4;
  --color-avant-garde-pink-600: #b13ba5;
  --color-avant-garde-pink-700: #922188;
  --color-avant-garde-pink-800: #750d6d;
  --color-avant-garde-pink-900: #5b0155;
  --color-avant-garde-pink-950: #3a0035;
  --color-plunge: #005568;
  --color-plunge-50: #e6f9ff;
  --color-plunge-100: #cdf3ff;
  --color-plunge-200: #addff0;
  --color-plunge-300: #8dc8db;
  --color-plunge-400: #65a7bc;
  --color-plunge-500: #468a9e;
  --color-plunge-600: #2a6d80;
  --color-plunge-700: #005568;
  --color-plunge-800: #084250;
  --color-plunge-900: #02333f;
  --color-plunge-950: #001f28;
  --color-captain-kirk: #99800e;
  --color-captain-kirk-50: #fff5ce;
  --color-captain-kirk-100: #f9eab0;
  --color-captain-kirk-200: #e8d58f;
  --color-captain-kirk-300: #d3bd6c;
  --color-captain-kirk-400: #b59c3d;
  --color-captain-kirk-500: #99800e;
  --color-captain-kirk-600: #7c6700;
  --color-captain-kirk-700: #635100;
  --color-captain-kirk-800: #4d3f00;
  --color-captain-kirk-900: #3c3100;
  --color-captain-kirk-950: #261e00;
  --color-sunken-ship: #002225;
  --color-sunken-ship-50: #e5fafc;
  --color-sunken-ship-100: #daf0f2;
  --color-sunken-ship-200: #c2dee0;
  --color-sunken-ship-300: #a9c8cb;
  --color-sunken-ship-400: #87a9ac;
  --color-sunken-ship-500: #6a8d90;
  --color-sunken-ship-600: #507275;
  --color-sunken-ship-700: #3c5a5d;
  --color-sunken-ship-800: #2b4648;
  --color-sunken-ship-900: #1f3537;
  --color-sunken-ship-950: #002225;
  --color-walkie-chalkie: #fff5fc;
  --color-walkie-chalkie-50: #fff5fc;
  --color-walkie-chalkie-100: #f2ecf0;
  --color-walkie-chalkie-200: #ded7dc;
  --color-walkie-chalkie-300: #c8c0c5;
  --color-walkie-chalkie-400: #a89fa6;
  --color-walkie-chalkie-500: #8c848a;
  --color-walkie-chalkie-600: #71696f;
  --color-walkie-chalkie-700: #5a5358;
  --color-walkie-chalkie-800: #474045;
  --color-walkie-chalkie-900: #363135;
  --color-walkie-chalkie-950: #221e21;
}