Grape Taffy to Imperial Purple color palette

F3DFFFGrape Taffy FFAD5FRajah 00AAA0Teal Me No Lies 008283Windows 95 Desktop 896200Alligator 59326AImperial Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Grape Taffy to Imperial Purple is a 6-color cool palette: #F3DFFF (Grape Taffy), #FFAD5F (Rajah), #00AAA0 (Teal Me No Lies), #008283 (Windows 95 Desktop), #896200 (Alligator), #59326A (Imperial Purple). It mixes purple, orange, turquoise, brown tones and feels cool overall. The strongest text pairing is #F3DFFF on #59326A with a contrast ratio of 8.05:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(243, 223, 255)	hsl(278, 100%, 94%)
Rajah	rgb(255, 173, 95)	hsl(29, 100%, 69%)
Teal Me No Lies	rgb(0, 170, 160)	hsl(176, 100%, 33%)
Windows 95 Desktop	rgb(0, 130, 131)	hsl(180, 100%, 26%)
Alligator	rgb(137, 98, 0)	hsl(43, 100%, 27%)
Imperial Purple	rgb(89, 50, 106)	hsl(282, 36%, 31%)

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.

Aa8.05:1 Very good#F3DFFF on #59326A
Aa8.05:1 Very good#59326A on #F3DFFF
Aa5.45:1 Good#FFAD5F on #59326A
Aa5.45:1 Good#59326A on #FFAD5F
Aa4.41:1 Poor#F3DFFF on #896200
Aa4.41:1 Poor#896200 on #F3DFFF
Aa3.72:1 Poor#F3DFFF on #008283
Aa3.72:1 Poor#008283 on #F3DFFF

Color blindness preview

CSS variables

/* Grape Taffy to Imperial Purple — https://swatchly.xyz/palette/f3dfff-ffad5f-00aaa0-008283-896200-59326a */
:root {
  --grape-taffy: #f3dfff;
  --rajah: #ffad5f;
  --teal-me-no-lies: #00aaa0;
  --windows-95-desktop: #008283;
  --alligator: #896200;
  --imperial-purple: #59326a;
}

Tailwind CSS v4

/* Grape Taffy to Imperial Purple — https://swatchly.xyz/palette/f3dfff-ffad5f-00aaa0-008283-896200-59326a */
@theme {
  --color-grape-taffy: #f3dfff;
  --color-grape-taffy-50: #f8edff;
  --color-grape-taffy-100: #f3dfff;
  --color-grape-taffy-200: #ddcee6;
  --color-grape-taffy-300: #c8b7d2;
  --color-grape-taffy-400: #aa98b5;
  --color-grape-taffy-500: #8f7d9a;
  --color-grape-taffy-600: #75647f;
  --color-grape-taffy-700: #5e4e67;
  --color-grape-taffy-800: #4a3c52;
  --color-grape-taffy-900: #392e40;
  --color-grape-taffy-950: #241b29;
  --color-rajah: #ffad5f;
  --color-rajah-50: #fff3e9;
  --color-rajah-100: #ffe7d2;
  --color-rajah-200: #ffcda2;
  --color-rajah-300: #ffad5f;
  --color-rajah-400: #db8e43;
  --color-rajah-500: #be7119;
  --color-rajah-600: #9d5900;
  --color-rajah-700: #7d4600;
  --color-rajah-800: #623600;
  --color-rajah-900: #4d2900;
  --color-rajah-950: #311800;
  --color-teal-me-no-lies: #00aaa0;
  --color-teal-me-no-lies-50: #e1fffb;
  --color-teal-me-no-lies-100: #befff8;
  --color-teal-me-no-lies-200: #9ff1e8;
  --color-teal-me-no-lies-300: #7ddfd5;
  --color-teal-me-no-lies-400: #4ac3b9;
  --color-teal-me-no-lies-500: #00aaa0;
  --color-teal-me-no-lies-600: #008981;
  --color-teal-me-no-lies-700: #006c66;
  --color-teal-me-no-lies-800: #00544f;
  --color-teal-me-no-lies-900: #00403c;
  --color-teal-me-no-lies-950: #002825;
  --color-windows-95-desktop: #008283;
  --color-windows-95-desktop-50: #d4ffff;
  --color-windows-95-desktop-100: #c0f9f9;
  --color-windows-95-desktop-200: #a4e8e8;
  --color-windows-95-desktop-300: #84d4d4;
  --color-windows-95-desktop-400: #59b7b7;
  --color-windows-95-desktop-500: #349c9d;
  --color-windows-95-desktop-600: #008283;
  --color-windows-95-desktop-700: #006768;
  --color-windows-95-desktop-800: #005151;
  --color-windows-95-desktop-900: #003e3f;
  --color-windows-95-desktop-950: #002727;
  --color-alligator: #896200;
  --color-alligator-50: #fff4e0;
  --color-alligator-100: #ffe8bf;
  --color-alligator-200: #f2d29a;
  --color-alligator-300: #deba79;
  --color-alligator-400: #c1994f;
  --color-alligator-500: #a57d2c;
  --color-alligator-600: #896200;
  --color-alligator-700: #6d4d00;
  --color-alligator-800: #563c00;
  --color-alligator-900: #432e00;
  --color-alligator-950: #2a1c00;
  --color-imperial-purple: #59326a;
  --color-imperial-purple-50: #faf1ff;
  --color-imperial-purple-100: #f6e3ff;
  --color-imperial-purple-200: #eac9fa;
  --color-imperial-purple-300: #d7b1e8;
  --color-imperial-purple-400: #b990cd;
  --color-imperial-purple-500: #9f75b2;
  --color-imperial-purple-600: #835b96;
  --color-imperial-purple-700: #6b467c;
  --color-imperial-purple-800: #59326a;
  --color-imperial-purple-900: #442850;
  --color-imperial-purple-950: #2b1734;
}