Cinnapink to Storm Is Coming color palette

9F607ACinnapink D7B9EBBeefy Pink 36AC77Jubilant Jade 3E6540Jurassic Park FFD3E4Light Pink 443762Storm Is Coming

Open in generator Export PNG, PDF, ASE…

About this palette

Cinnapink to Storm Is Coming is a 6-color cool palette: #9F607A (Cinnapink), #D7B9EB (Beefy Pink), #36AC77 (Jubilant Jade), #3E6540 (Jurassic Park), #FFD3E4 (Light Pink), #443762 (Storm Is Coming). It mixes red, purple, green, pink tones and feels cool overall. The strongest text pairing is #FFD3E4 on #443762 with a contrast ratio of 7.97:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cinnapink	rgb(159, 96, 122)	hsl(335, 25%, 50%)
Beefy Pink	rgb(215, 185, 235)	hsl(276, 56%, 82%)
Jubilant Jade	rgb(54, 172, 119)	hsl(153, 52%, 44%)
Jurassic Park	rgb(62, 101, 64)	hsl(123, 24%, 32%)
Light Pink	rgb(255, 211, 228)	hsl(337, 100%, 91%)
Storm Is Coming	rgb(68, 55, 98)	hsl(258, 28%, 30%)

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.

Aa7.97:1 Very good#FFD3E4 on #443762
Aa7.97:1 Very good#443762 on #FFD3E4
Aa6.11:1 Good#D7B9EB on #443762
Aa6.11:1 Good#443762 on #D7B9EB
Aa5.00:1 Good#3E6540 on #FFD3E4
Aa5.00:1 Good#FFD3E4 on #3E6540
Aa3.83:1 Poor#D7B9EB on #3E6540
Aa3.83:1 Poor#3E6540 on #D7B9EB

Color blindness preview

CSS variables

/* Cinnapink to Storm Is Coming — https://swatchly.xyz/palette/9f607a-d7b9eb-36ac77-3e6540-ffd3e4-443762 */
:root {
  --cinnapink: #9f607a;
  --beefy-pink: #d7b9eb;
  --jubilant-jade: #36ac77;
  --jurassic-park: #3e6540;
  --light-pink: #ffd3e4;
  --storm-is-coming: #443762;
}

Tailwind CSS v4

/* Cinnapink to Storm Is Coming — https://swatchly.xyz/palette/9f607a-d7b9eb-36ac77-3e6540-ffd3e4-443762 */
@theme {
  --color-cinnapink: #9f607a;
  --color-cinnapink-50: #fff1f6;
  --color-cinnapink-100: #ffe5ee;
  --color-cinnapink-200: #ffcbde;
  --color-cinnapink-300: #eeb4ca;
  --color-cinnapink-400: #d394ad;
  --color-cinnapink-500: #ba7993;
  --color-cinnapink-600: #9f607a;
  --color-cinnapink-700: #824961;
  --color-cinnapink-800: #69364c;
  --color-cinnapink-900: #52273a;
  --color-cinnapink-950: #351624;
  --color-beefy-pink: #d7b9eb;
  --color-beefy-pink-50: #fbf6ff;
  --color-beefy-pink-100: #f6e9ff;
  --color-beefy-pink-200: #e8d3f7;
  --color-beefy-pink-300: #d7b9eb;
  --color-beefy-pink-400: #b59ac7;
  --color-beefy-pink-500: #997dab;
  --color-beefy-pink-600: #7d628e;
  --color-beefy-pink-700: #644b74;
  --color-beefy-pink-800: #4e395c;
  --color-beefy-pink-900: #3c2a48;
  --color-beefy-pink-950: #26192e;
  --color-jubilant-jade: #36ac77;
  --color-jubilant-jade-50: #caffe0;
  --color-jubilant-jade-100: #b1f6d0;
  --color-jubilant-jade-200: #8fe3b6;
  --color-jubilant-jade-300: #6acc9b;
  --color-jubilant-jade-400: #36ac77;
  --color-jubilant-jade-500: #06925f;
  --color-jubilant-jade-600: #00764c;
  --color-jubilant-jade-700: #005f3c;
  --color-jubilant-jade-800: #004b2f;
  --color-jubilant-jade-900: #003c24;
  --color-jubilant-jade-950: #002716;
  --color-jurassic-park: #3e6540;
  --color-jurassic-park-50: #e5fde5;
  --color-jurassic-park-100: #d9f4d9;
  --color-jurassic-park-200: #c3e3c3;
  --color-jurassic-park-300: #aaceab;
  --color-jurassic-park-400: #88b08a;
  --color-jurassic-park-500: #6d966e;
  --color-jurassic-park-600: #547b56;
  --color-jurassic-park-700: #3e6540;
  --color-jurassic-park-800: #2f4f31;
  --color-jurassic-park-900: #223d23;
  --color-jurassic-park-950: #132714;
  --color-light-pink: #ffd3e4;
  --color-light-pink-50: #fffafc;
  --color-light-pink-100: #ffeef4;
  --color-light-pink-200: #ffd3e4;
  --color-light-pink-300: #e1bdcb;
  --color-light-pink-400: #c29baa;
  --color-light-pink-500: #a57d8d;
  --color-light-pink-600: #886271;
  --color-light-pink-700: #6d4b59;
  --color-light-pink-800: #563844;
  --color-light-pink-900: #432a35;
  --color-light-pink-950: #2b1920;
  --color-storm-is-coming: #443762;
  --color-storm-is-coming-50: #f6f3ff;
  --color-storm-is-coming-100: #ede7ff;
  --color-storm-is-coming-200: #dad1f8;
  --color-storm-is-coming-300: #c4b9e5;
  --color-storm-is-coming-400: #a498c8;
  --color-storm-is-coming-500: #897cac;
  --color-storm-is-coming-600: #6e618f;
  --color-storm-is-coming-700: #574b74;
  --color-storm-is-coming-800: #443762;
  --color-storm-is-coming-900: #342b49;
  --color-storm-is-coming-950: #201a2f;
}