Perrywinkle to Cosy Summer Sunset color palette

788DE3Perrywinkle 44807CParadiso 666224Jungle Civilization 00393BElite Teal EBA5A3Cosy Summer Sunset

Open in generator Export PNG, PDF, ASE…

About this palette

Perrywinkle to Cosy Summer Sunset is a 5-color cool, vintage palette: #788DE3 (Perrywinkle), #44807C (Paradiso), #666224 (Jungle Civilization), #00393B (Elite Teal), #EBA5A3 (Cosy Summer Sunset). It mixes blue, turquoise, brown, pink tones and feels cool overall. The strongest text pairing is #00393B on #EBA5A3 with a contrast ratio of 6.34:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perrywinkle	rgb(120, 141, 227)	hsl(228, 66%, 68%)
Paradiso	rgb(68, 128, 124)	hsl(176, 31%, 38%)
Jungle Civilization	rgb(102, 98, 36)	hsl(56, 48%, 27%)
Elite Teal	rgb(0, 57, 59)	hsl(182, 100%, 12%)
Cosy Summer Sunset	rgb(235, 165, 163)	hsl(2, 64%, 78%)

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.

Aa6.34:1 Good#00393B on #EBA5A3
Aa6.34:1 Good#EBA5A3 on #00393B
Aa4.08:1 Poor#788DE3 on #00393B
Aa4.08:1 Poor#00393B on #788DE3
Aa3.13:1 Poor#666224 on #EBA5A3
Aa3.13:1 Poor#EBA5A3 on #666224

Color blindness preview

CSS variables

/* Perrywinkle to Cosy Summer Sunset — https://swatchly.xyz/palette/788de3-44807c-666224-00393b-eba5a3 */
:root {
  --perrywinkle: #788de3;
  --paradiso: #44807c;
  --jungle-civilization: #666224;
  --elite-teal: #00393b;
  --cosy-summer-sunset: #eba5a3;
}

Tailwind CSS v4

/* Perrywinkle to Cosy Summer Sunset — https://swatchly.xyz/palette/788de3-44807c-666224-00393b-eba5a3 */
@theme {
  --color-perrywinkle: #788de3;
  --color-perrywinkle-50: #f5f7ff;
  --color-perrywinkle-100: #ebf0ff;
  --color-perrywinkle-200: #d3deff;
  --color-perrywinkle-300: #b8c8ff;
  --color-perrywinkle-400: #92a8fa;
  --color-perrywinkle-500: #788de3;
  --color-perrywinkle-600: #5c6fc2;
  --color-perrywinkle-700: #4656a3;
  --color-perrywinkle-800: #344185;
  --color-perrywinkle-900: #263069;
  --color-perrywinkle-950: #151c45;
  --color-paradiso: #44807c;
  --color-paradiso-50: #dcfdfa;
  --color-paradiso-100: #d1f6f2;
  --color-paradiso-200: #b9e5e1;
  --color-paradiso-300: #9fd1cd;
  --color-paradiso-400: #7bb4af;
  --color-paradiso-500: #5e9a95;
  --color-paradiso-600: #44807c;
  --color-paradiso-700: #2e6763;
  --color-paradiso-800: #1d514e;
  --color-paradiso-900: #113e3c;
  --color-paradiso-950: #062725;
  --color-jungle-civilization: #666224;
  --color-jungle-civilization-50: #f9f8d5;
  --color-jungle-civilization-100: #efeec7;
  --color-jungle-civilization-200: #deddaf;
  --color-jungle-civilization-300: #cbc894;
  --color-jungle-civilization-400: #aeab70;
  --color-jungle-civilization-500: #949154;
  --color-jungle-civilization-600: #7b773b;
  --color-jungle-civilization-700: #666224;
  --color-jungle-civilization-800: #504d17;
  --color-jungle-civilization-900: #3e3b0b;
  --color-jungle-civilization-950: #272503;
  --color-elite-teal: #00393b;
  --color-elite-teal-50: #e0fcfc;
  --color-elite-teal-100: #d3f2f3;
  --color-elite-teal-200: #bae0e1;
  --color-elite-teal-300: #9fcacc;
  --color-elite-teal-400: #7babad;
  --color-elite-teal-500: #5e9091;
  --color-elite-teal-600: #447476;
  --color-elite-teal-700: #305c5e;
  --color-elite-teal-800: #214849;
  --color-elite-teal-900: #00393b;
  --color-elite-teal-950: #0a2223;
  --color-cosy-summer-sunset: #eba5a3;
  --color-cosy-summer-sunset-50: #ffedec;
  --color-cosy-summer-sunset-100: #ffdddc;
  --color-cosy-summer-sunset-200: #f9c2bf;
  --color-cosy-summer-sunset-300: #eba5a3;
  --color-cosy-summer-sunset-400: #ca8886;
  --color-cosy-summer-sunset-500: #ae6d6c;
  --color-cosy-summer-sunset-600: #925554;
  --color-cosy-summer-sunset-700: #784141;
  --color-cosy-summer-sunset-800: #613131;
  --color-cosy-summer-sunset-900: #4e2525;
  --color-cosy-summer-sunset-950: #331515;
}