Pink Punk to Cornsilk Color Palette

About this palette

Pink Punk to Cornsilk is a 4-color vintage palette: #DD8AC0 (Pink Punk), #007F4D (Woodland Soul), #393368 (Her Highness), #FFF9DE (Cornsilk). It mixes pink, green, purple, white tones and feels balanced overall. The strongest text pairing is #393368 on #FFF9DE with a contrast ratio of 10.75:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Punk	rgb(221, 138, 192)	hsl(321, 55%, 70%)
Woodland Soul	rgb(0, 127, 77)	hsl(156, 100%, 25%)
Her Highness	rgb(57, 51, 104)	hsl(247, 34%, 30%)
Cornsilk	rgb(255, 249, 222)	hsl(49, 100%, 94%)

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.

Aa10.75:1 Very good#393368 on #FFF9DE
Aa10.75:1 Very good#FFF9DE on #393368
Aa4.79:1 Good#007F4D on #FFF9DE
Aa4.79:1 Good#FFF9DE on #007F4D
Aa4.59:1 Good#DD8AC0 on #393368
Aa4.59:1 Good#393368 on #DD8AC0

Color blindness preview

CSS variables

/* Pink Punk to Cornsilk — https://swatchly.xyz/palette/dd8ac0-007f4d-393368-fff9de */
:root {
  --pink-punk: #dd8ac0;
  --woodland-soul: #007f4d;
  --her-highness: #393368;
  --cornsilk: #fff9de;
}

Tailwind CSS v4

/* Pink Punk to Cornsilk — https://swatchly.xyz/palette/dd8ac0-007f4d-393368-fff9de */
@theme {
  --color-pink-punk: #dd8ac0;
  --color-pink-punk-50: #fff5fb;
  --color-pink-punk-100: #ffe8f6;
  --color-pink-punk-200: #ffcbeb;
  --color-pink-punk-300: #f5aedb;
  --color-pink-punk-400: #dd8ac0;
  --color-pink-punk-500: #bd6ea2;
  --color-pink-punk-600: #9e5285;
  --color-pink-punk-700: #823c6b;
  --color-pink-punk-800: #682b55;
  --color-pink-punk-900: #511e41;
  --color-pink-punk-950: #340f29;
  --color-woodland-soul: #007f4d;
  --color-woodland-soul-50: #ddffe9;
  --color-woodland-soul-100: #c1fbd7;
  --color-woodland-soul-200: #a3eabf;
  --color-woodland-soul-300: #83d5a5;
  --color-woodland-soul-400: #58b783;
  --color-woodland-soul-500: #339b67;
  --color-woodland-soul-600: #007f4d;
  --color-woodland-soul-700: #00653c;
  --color-woodland-soul-800: #004f2e;
  --color-woodland-soul-900: #003d22;
  --color-woodland-soul-950: #002714;
  --color-her-highness: #393368;
  --color-her-highness-50: #f4f4ff;
  --color-her-highness-100: #e9e9ff;
  --color-her-highness-200: #d3d2ff;
  --color-her-highness-300: #bbb9f0;
  --color-her-highness-400: #9a97d3;
  --color-her-highness-500: #7e7ab6;
  --color-her-highness-600: #635f97;
  --color-her-highness-700: #4c487a;
  --color-her-highness-800: #393368;
  --color-her-highness-900: #2b284c;
  --color-her-highness-950: #1a1830;
  --color-cornsilk: #fff9de;
  --color-cornsilk-50: #fff9de;
  --color-cornsilk-100: #f2eede;
  --color-cornsilk-200: #dedac7;
  --color-cornsilk-300: #c8c3ad;
  --color-cornsilk-400: #a8a38b;
  --color-cornsilk-500: #8d876f;
  --color-cornsilk-600: #716c55;
  --color-cornsilk-700: #5a5641;
  --color-cornsilk-800: #474330;
  --color-cornsilk-900: #373323;
  --color-cornsilk-950: #221f14;
}