Mango Cheesecake to Black Cherry Color Palette

About this palette

Mango Cheesecake to Black Cherry is a 4-color palette: #FFECDB (Mango Cheesecake), #63A98D (Hole in One), #1A619D (Hyper Blue), #2E172B (Black Cherry). It mixes white, turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #FFECDB on #2E172B with a contrast ratio of 14.35:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mango Cheesecake	rgb(255, 236, 219)	hsl(28, 100%, 93%)
Hole in One	rgb(99, 169, 141)	hsl(156, 29%, 53%)
Hyper Blue	rgb(26, 97, 157)	hsl(207, 72%, 36%)
Black Cherry	rgb(46, 23, 43)	hsl(308, 33%, 14%)

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.

Aa14.35:1 Super#FFECDB on #2E172B
Aa14.35:1 Super#2E172B on #FFECDB
Aa5.96:1 Good#63A98D on #2E172B
Aa5.96:1 Good#2E172B on #63A98D
Aa5.64:1 Good#FFECDB on #1A619D
Aa5.64:1 Good#1A619D on #FFECDB

Color blindness preview

CSS variables

/* Mango Cheesecake to Black Cherry — https://swatchly.xyz/palette/ffecdb-63a98d-1a619d-2e172b */
:root {
  --mango-cheesecake: #ffecdb;
  --hole-in-one: #63a98d;
  --hyper-blue: #1a619d;
  --black-cherry: #2e172b;
}

Tailwind CSS v4

/* Mango Cheesecake to Black Cherry — https://swatchly.xyz/palette/ffecdb-63a98d-1a619d-2e172b */
@theme {
  --color-mango-cheesecake: #ffecdb;
  --color-mango-cheesecake-50: #fff7f1;
  --color-mango-cheesecake-100: #ffecdb;
  --color-mango-cheesecake-200: #e6d9cd;
  --color-mango-cheesecake-300: #d0c1b3;
  --color-mango-cheesecake-400: #b1a091;
  --color-mango-cheesecake-500: #958475;
  --color-mango-cheesecake-600: #79695b;
  --color-mango-cheesecake-700: #615245;
  --color-mango-cheesecake-800: #4c4034;
  --color-mango-cheesecake-900: #3b3127;
  --color-mango-cheesecake-950: #251e17;
  --color-hole-in-one: #63a98d;
  --color-hole-in-one-50: #d5fdeb;
  --color-hole-in-one-100: #c5f2de;
  --color-hole-in-one-200: #a9dfc8;
  --color-hole-in-one-300: #8bc9af;
  --color-hole-in-one-400: #63a98d;
  --color-hole-in-one-500: #498f74;
  --color-hole-in-one-600: #30755c;
  --color-hole-in-one-700: #1d5e48;
  --color-hole-in-one-800: #104b38;
  --color-hole-in-one-900: #073b2b;
  --color-hole-in-one-950: #02261a;
  --color-hyper-blue: #1a619d;
  --color-hyper-blue-50: #eef6ff;
  --color-hyper-blue-100: #dcedff;
  --color-hyper-blue-200: #bcddff;
  --color-hyper-blue-300: #94caff;
  --color-hyper-blue-400: #6cacea;
  --color-hyper-blue-500: #4f91d0;
  --color-hyper-blue-600: #3477b5;
  --color-hyper-blue-700: #1a619d;
  --color-hyper-blue-800: #0e4c7e;
  --color-hyper-blue-900: #033a65;
  --color-hyper-blue-950: #002443;
  --color-black-cherry: #2e172b;
  --color-black-cherry-50: #fff0fc;
  --color-black-cherry-100: #f8e4f4;
  --color-black-cherry-200: #e7cfe2;
  --color-black-cherry-300: #d2b7cd;
  --color-black-cherry-400: #b497af;
  --color-black-cherry-500: #997c94;
  --color-black-cherry-600: #7e6279;
  --color-black-cherry-700: #664d62;
  --color-black-cherry-800: #513b4d;
  --color-black-cherry-900: #3f2d3d;
  --color-black-cherry-950: #2e172b;
}