Cherry Berry to Caramel Essence color palette

9E4E58Cherry Berry 7B4042Wild Berry CBDDFFIcy Plains 6BA7A2Paradise Island 3B2D18Cola D9B367Caramel Essence

Open in generator Export PNG, PDF, ASE…

About this palette

Cherry Berry to Caramel Essence is a 6-color warm, vintage palette: #9E4E58 (Cherry Berry), #7B4042 (Wild Berry), #CBDDFF (Icy Plains), #6BA7A2 (Paradise Island), #3B2D18 (Cola), #D9B367 (Caramel Essence). It mixes red, blue, turquoise, brown, yellow tones and feels warm overall. The strongest text pairing is #CBDDFF on #3B2D18 with a contrast ratio of 9.73:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cherry Berry	rgb(158, 78, 88)	hsl(352, 34%, 46%)
Wild Berry	rgb(123, 64, 66)	hsl(358, 32%, 37%)
Icy Plains	rgb(203, 221, 255)	hsl(219, 100%, 90%)
Paradise Island	rgb(107, 167, 162)	hsl(175, 25%, 54%)
Cola	rgb(59, 45, 24)	hsl(36, 42%, 16%)
Caramel Essence	rgb(217, 179, 103)	hsl(40, 60%, 63%)

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.

Aa9.73:1 Very good#CBDDFF on #3B2D18
Aa9.73:1 Very good#3B2D18 on #CBDDFF
Aa6.73:1 Good#3B2D18 on #D9B367
Aa6.73:1 Good#D9B367 on #3B2D18
Aa5.77:1 Good#7B4042 on #CBDDFF
Aa5.77:1 Good#CBDDFF on #7B4042
Aa4.87:1 Good#6BA7A2 on #3B2D18
Aa4.87:1 Good#3B2D18 on #6BA7A2

Color blindness preview

CSS variables

/* Cherry Berry to Caramel Essence — https://swatchly.xyz/palette/9e4e58-7b4042-cbddff-6ba7a2-3b2d18-d9b367 */
:root {
  --cherry-berry: #9e4e58;
  --wild-berry: #7b4042;
  --icy-plains: #cbddff;
  --paradise-island: #6ba7a2;
  --cola: #3b2d18;
  --caramel-essence: #d9b367;
}

Tailwind CSS v4

/* Cherry Berry to Caramel Essence — https://swatchly.xyz/palette/9e4e58-7b4042-cbddff-6ba7a2-3b2d18-d9b367 */
@theme {
  --color-cherry-berry: #9e4e58;
  --color-cherry-berry-50: #fff1f2;
  --color-cherry-berry-100: #ffe3e5;
  --color-cherry-berry-200: #ffc6ca;
  --color-cherry-berry-300: #f5a8af;
  --color-cherry-berry-400: #d8858e;
  --color-cherry-berry-500: #bc6972;
  --color-cherry-berry-600: #9e4e58;
  --color-cherry-berry-700: #813a44;
  --color-cherry-berry-800: #682a33;
  --color-cherry-berry-900: #531e26;
  --color-cherry-berry-950: #361016;
  --color-wild-berry: #7b4042;
  --color-wild-berry-50: #fff1f1;
  --color-wild-berry-100: #ffe4e3;
  --color-wild-berry-200: #fdc8c8;
  --color-wild-berry-300: #eaafaf;
  --color-wild-berry-400: #cd8d8e;
  --color-wild-berry-500: #b17172;
  --color-wild-berry-600: #945758;
  --color-wild-berry-700: #7b4042;
  --color-wild-berry-800: #613133;
  --color-wild-berry-900: #4c2426;
  --color-wild-berry-950: #311516;
  --color-icy-plains: #cbddff;
  --color-icy-plains-50: #f5f9ff;
  --color-icy-plains-100: #e7f0ff;
  --color-icy-plains-200: #cbddff;
  --color-icy-plains-300: #b7c5e1;
  --color-icy-plains-400: #95a5c4;
  --color-icy-plains-500: #7889a8;
  --color-icy-plains-600: #5e6d8b;
  --color-icy-plains-700: #485671;
  --color-icy-plains-800: #364259;
  --color-icy-plains-900: #293346;
  --color-icy-plains-950: #181f2d;
  --color-paradise-island: #6ba7a2;
  --color-paradise-island-50: #d9fbf7;
  --color-paradise-island-100: #caf0ed;
  --color-paradise-island-200: #afddd9;
  --color-paradise-island-300: #92c6c2;
  --color-paradise-island-400: #6ba7a2;
  --color-paradise-island-500: #518d88;
  --color-paradise-island-600: #39736e;
  --color-paradise-island-700: #265c58;
  --color-paradise-island-800: #184946;
  --color-paradise-island-900: #0f3937;
  --color-paradise-island-950: #062523;
  --color-cola: #3b2d18;
  --color-cola-50: #fef4e5;
  --color-cola-100: #f5e9da;
  --color-cola-200: #e3d5c3;
  --color-cola-300: #cebfa9;
  --color-cola-400: #af9e87;
  --color-cola-500: #93826b;
  --color-cola-600: #776751;
  --color-cola-700: #5f513d;
  --color-cola-800: #4a3e2c;
  --color-cola-900: #3b2d18;
  --color-cola-950: #231c11;
  --color-caramel-essence: #d9b367;
  --color-caramel-essence-50: #ffefd1;
  --color-caramel-essence-100: #fce2b2;
  --color-caramel-essence-200: #eacd93;
  --color-caramel-essence-300: #d9b367;
  --color-caramel-essence-400: #b9954c;
  --color-caramel-essence-500: #9f7b2c;
  --color-caramel-essence-600: #84620c;
  --color-caramel-essence-700: #6b4d00;
  --color-caramel-essence-800: #553d00;
  --color-caramel-essence-900: #432f00;
  --color-caramel-essence-950: #2a1d00;
}