Grape Taffy to Pink Palazzo Color Palette

About this palette

Grape Taffy to Pink Palazzo is a 4-color cool palette: #EBDCFF (Grape Taffy), #254324 (Myrtle), #007B92 (Celestial), #D99D8B (Pink Palazzo). It mixes purple, green, blue, red tones and feels cool overall. The strongest text pairing is #EBDCFF on #254324 with a contrast ratio of 8.50:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(235, 220, 255)	hsl(266, 100%, 93%)
Myrtle	rgb(37, 67, 36)	hsl(118, 30%, 20%)
Celestial	rgb(0, 123, 146)	hsl(189, 100%, 29%)
Pink Palazzo	rgb(217, 157, 139)	hsl(14, 51%, 70%)

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.50:1 Very good#EBDCFF on #254324
Aa8.50:1 Very good#254324 on #EBDCFF
Aa4.80:1 Good#254324 on #D99D8B
Aa4.80:1 Good#D99D8B on #254324
Aa3.82:1 Poor#EBDCFF on #007B92
Aa3.82:1 Poor#007B92 on #EBDCFF

Color blindness preview

CSS variables

/* Grape Taffy to Pink Palazzo — https://swatchly.xyz/palette/ebdcff-254324-007b92-d99d8b */
:root {
  --grape-taffy: #ebdcff;
  --myrtle: #254324;
  --celestial: #007b92;
  --pink-palazzo: #d99d8b;
}

Tailwind CSS v4

/* Grape Taffy to Pink Palazzo — https://swatchly.xyz/palette/ebdcff-254324-007b92-d99d8b */
@theme {
  --color-grape-taffy: #ebdcff;
  --color-grape-taffy-50: #f3eaff;
  --color-grape-taffy-100: #ebdcff;
  --color-grape-taffy-200: #d7cbe6;
  --color-grape-taffy-300: #c2b6d3;
  --color-grape-taffy-400: #a597b7;
  --color-grape-taffy-500: #8b7d9c;
  --color-grape-taffy-600: #716482;
  --color-grape-taffy-700: #5b4f6a;
  --color-grape-taffy-800: #473d54;
  --color-grape-taffy-900: #372e42;
  --color-grape-taffy-950: #221c2a;
  --color-myrtle: #254324;
  --color-myrtle-50: #e8fce6;
  --color-myrtle-100: #dcf3db;
  --color-myrtle-200: #c6e0c4;
  --color-myrtle-300: #abc9a9;
  --color-myrtle-400: #88a986;
  --color-myrtle-500: #6b8c69;
  --color-myrtle-600: #51704f;
  --color-myrtle-700: #3b573a;
  --color-myrtle-800: #254324;
  --color-myrtle-900: #1f321e;
  --color-myrtle-950: #111f10;
  --color-celestial: #007b92;
  --color-celestial-50: #e5f9ff;
  --color-celestial-100: #ccf4ff;
  --color-celestial-200: #a3e5f7;
  --color-celestial-300: #83d0e4;
  --color-celestial-400: #57b1c8;
  --color-celestial-500: #3396ae;
  --color-celestial-600: #007b92;
  --color-celestial-700: #006274;
  --color-celestial-800: #004c5b;
  --color-celestial-900: #003b47;
  --color-celestial-950: #00252d;
  --color-pink-palazzo: #d99d8b;
  --color-pink-palazzo-50: #fff8f5;
  --color-pink-palazzo-100: #ffede8;
  --color-pink-palazzo-200: #ffd5c9;
  --color-pink-palazzo-300: #f0beaf;
  --color-pink-palazzo-400: #d99d8b;
  --color-pink-palazzo-500: #b9806f;
  --color-pink-palazzo-600: #9a6353;
  --color-pink-palazzo-700: #7e4c3d;
  --color-pink-palazzo-800: #64382c;
  --color-pink-palazzo-900: #4e291e;
  --color-pink-palazzo-950: #311710;
}