Pomelo Red to Grape Kiss Color Palette

About this palette

Pomelo Red to Grape Kiss is a 5-color warm, vintage palette: #E790AD (Pomelo Red), #5E3216 (Count Chocula), #00A1B4 (True Sky Blue), #8AE9FF (Alpine Expedition), #884769 (Grape Kiss). It mixes pink, brown, turquoise, red tones and feels warm overall. The strongest text pairing is #5E3216 on #8AE9FF with a contrast ratio of 7.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pomelo Red	rgb(231, 144, 173)	hsl(340, 64%, 74%)
Count Chocula	rgb(94, 50, 22)	hsl(23, 62%, 23%)
True Sky Blue	rgb(0, 161, 180)	hsl(186, 100%, 35%)
Alpine Expedition	rgb(138, 233, 255)	hsl(191, 100%, 77%)
Grape Kiss	rgb(136, 71, 105)	hsl(329, 31%, 41%)

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.81:1 Very good#5E3216 on #8AE9FF
Aa7.81:1 Very good#8AE9FF on #5E3216
Aa4.82:1 Good#8AE9FF on #884769
Aa4.82:1 Good#884769 on #8AE9FF
Aa4.63:1 Good#E790AD on #5E3216
Aa4.63:1 Good#5E3216 on #E790AD
Aa3.48:1 Poor#5E3216 on #00A1B4
Aa3.48:1 Poor#00A1B4 on #5E3216

Color blindness preview

CSS variables

/* Pomelo Red to Grape Kiss — https://swatchly.xyz/palette/e790ad-5e3216-00a1b4-8ae9ff-884769 */
:root {
  --pomelo-red: #e790ad;
  --count-chocula: #5e3216;
  --true-sky-blue: #00a1b4;
  --alpine-expedition: #8ae9ff;
  --grape-kiss: #884769;
}

Tailwind CSS v4

/* Pomelo Red to Grape Kiss — https://swatchly.xyz/palette/e790ad-5e3216-00a1b4-8ae9ff-884769 */
@theme {
  --color-pomelo-red: #e790ad;
  --color-pomelo-red-50: #fff7f9;
  --color-pomelo-red-100: #ffecf2;
  --color-pomelo-red-200: #ffd3e0;
  --color-pomelo-red-300: #fdb4cb;
  --color-pomelo-red-400: #e790ad;
  --color-pomelo-red-500: #c6738f;
  --color-pomelo-red-600: #a65673;
  --color-pomelo-red-700: #883f5a;
  --color-pomelo-red-800: #6d2d45;
  --color-pomelo-red-900: #551f34;
  --color-pomelo-red-950: #36101f;
  --color-count-chocula: #5e3216;
  --color-count-chocula-50: #fff2eb;
  --color-count-chocula-100: #ffe5d7;
  --color-count-chocula-200: #f7ceb7;
  --color-count-chocula-300: #e3b59b;
  --color-count-chocula-400: #c69477;
  --color-count-chocula-500: #a9775b;
  --color-count-chocula-600: #8c5d41;
  --color-count-chocula-700: #71472e;
  --color-count-chocula-800: #5e3216;
  --color-count-chocula-900: #462815;
  --color-count-chocula-950: #2d170a;
  --color-true-sky-blue: #00a1b4;
  --color-true-sky-blue-50: #e6fbff;
  --color-true-sky-blue-100: #cdf7ff;
  --color-true-sky-blue-200: #9cebf9;
  --color-true-sky-blue-300: #79d8e8;
  --color-true-sky-blue-400: #47bbcd;
  --color-true-sky-blue-500: #00a1b4;
  --color-true-sky-blue-600: #008291;
  --color-true-sky-blue-700: #006773;
  --color-true-sky-blue-800: #00505a;
  --color-true-sky-blue-900: #003d45;
  --color-true-sky-blue-950: #00262b;
  --color-alpine-expedition: #8ae9ff;
  --color-alpine-expedition-50: #e6faff;
  --color-alpine-expedition-100: #caf5ff;
  --color-alpine-expedition-200: #8ae9ff;
  --color-alpine-expedition-300: #82d0e2;
  --color-alpine-expedition-400: #56b1c5;
  --color-alpine-expedition-500: #3095aa;
  --color-alpine-expedition-600: #00798d;
  --color-alpine-expedition-700: #006070;
  --color-alpine-expedition-800: #004b58;
  --color-alpine-expedition-900: #003a44;
  --color-alpine-expedition-950: #00242c;
  --color-grape-kiss: #884769;
  --color-grape-kiss-50: #fff1f7;
  --color-grape-kiss-100: #ffe2ef;
  --color-grape-kiss-200: #ffc7e1;
  --color-grape-kiss-300: #eeb0ce;
  --color-grape-kiss-400: #d48fb1;
  --color-grape-kiss-500: #ba7598;
  --color-grape-kiss-600: #9f5c7e;
  --color-grape-kiss-700: #884769;
  --color-grape-kiss-800: #6d3653;
  --color-grape-kiss-900: #562740;
  --color-grape-kiss-950: #381629;
}