Perrywinkle to Elite Teal Color Palette

About this palette

Perrywinkle to Elite Teal is a 4-color vintage palette: #8798FF (Perrywinkle), #FFE4CA (Bisque), #975F00 (Embarrassed Frog), #003338 (Elite Teal). It mixes blue, orange, brown, turquoise tones and feels balanced overall. The strongest text pairing is #FFE4CA on #003338 with a contrast ratio of 11.24:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perrywinkle	rgb(135, 152, 255)	hsl(232, 100%, 76%)
Bisque	rgb(255, 228, 202)	hsl(29, 100%, 90%)
Embarrassed Frog	rgb(151, 95, 0)	hsl(38, 100%, 30%)
Elite Teal	rgb(0, 51, 56)	hsl(185, 100%, 11%)

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.

Aa11.24:1 Very good#FFE4CA on #003338
Aa11.24:1 Very good#003338 on #FFE4CA
Aa5.20:1 Good#8798FF on #003338
Aa5.20:1 Good#003338 on #8798FF
Aa4.35:1 Poor#FFE4CA on #975F00
Aa4.35:1 Poor#975F00 on #FFE4CA

Color blindness preview

CSS variables

/* Perrywinkle to Elite Teal — https://swatchly.xyz/palette/8798ff-ffe4ca-975f00-003338 */
:root {
  --perrywinkle: #8798ff;
  --bisque: #ffe4ca;
  --embarrassed-frog: #975f00;
  --elite-teal: #003338;
}

Tailwind CSS v4

/* Perrywinkle to Elite Teal — https://swatchly.xyz/palette/8798ff-ffe4ca-975f00-003338 */
@theme {
  --color-perrywinkle: #8798ff;
  --color-perrywinkle-50: #f2f5ff;
  --color-perrywinkle-100: #e5eaff;
  --color-perrywinkle-200: #ccd6ff;
  --color-perrywinkle-300: #afbdff;
  --color-perrywinkle-400: #8798ff;
  --color-perrywinkle-500: #6d7ce0;
  --color-perrywinkle-600: #5561c0;
  --color-perrywinkle-700: #414aa1;
  --color-perrywinkle-800: #313884;
  --color-perrywinkle-900: #24296a;
  --color-perrywinkle-950: #151847;
  --color-bisque: #ffe4ca;
  --color-bisque-50: #fff1e3;
  --color-bisque-100: #ffe4ca;
  --color-bisque-200: #e6d2bf;
  --color-bisque-300: #d2bba6;
  --color-bisque-400: #b49c84;
  --color-bisque-500: #998169;
  --color-bisque-600: #7e6750;
  --color-bisque-700: #66513c;
  --color-bisque-800: #503e2c;
  --color-bisque-900: #3f2f20;
  --color-bisque-950: #281d12;
  --color-embarrassed-frog: #975f00;
  --color-embarrassed-frog-50: #fff3e6;
  --color-embarrassed-frog-100: #ffe7cd;
  --color-embarrassed-frog-200: #fdcf9a;
  --color-embarrassed-frog-300: #ebb77a;
  --color-embarrassed-frog-400: #cf9650;
  --color-embarrassed-frog-500: #b37a2d;
  --color-embarrassed-frog-600: #975f00;
  --color-embarrassed-frog-700: #784b00;
  --color-embarrassed-frog-800: #5f3a00;
  --color-embarrassed-frog-900: #4a2c00;
  --color-embarrassed-frog-950: #2f1a00;
  --color-elite-teal: #003338;
  --color-elite-teal-50: #e1fbfe;
  --color-elite-teal-100: #d4f2f5;
  --color-elite-teal-200: #bcdfe3;
  --color-elite-teal-300: #a1c9ce;
  --color-elite-teal-400: #7da9af;
  --color-elite-teal-500: #5f8d92;
  --color-elite-teal-600: #457075;
  --color-elite-teal-700: #30585c;
  --color-elite-teal-800: #204347;
  --color-elite-teal-900: #003338;
  --color-elite-teal-950: #0a1d20;
}