Beet Red to Cherry Berry Color Palette

About this palette

Beet Red to Cherry Berry is a 5-color cool palette: #88224A (Beet Red), #00E9D0 (Fake Jade), #00231D (Nightmare), #36C1B0 (Emerald Bliss), #A74F68 (Cherry Berry). It mixes red, turquoise tones and feels cool overall. The strongest text pairing is #00E9D0 on #00231D with a contrast ratio of 10.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beet Red	rgb(136, 34, 74)	hsl(336, 60%, 33%)
Fake Jade	rgb(0, 233, 208)	hsl(174, 100%, 46%)
Nightmare	rgb(0, 35, 29)	hsl(170, 100%, 7%)
Emerald Bliss	rgb(54, 193, 176)	hsl(173, 56%, 48%)
Cherry Berry	rgb(167, 79, 104)	hsl(343, 36%, 48%)

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.

Aa10.78:1 Very good#00E9D0 on #00231D
Aa10.78:1 Very good#00231D on #00E9D0
Aa7.48:1 Very good#00231D on #36C1B0
Aa7.48:1 Very good#36C1B0 on #00231D
Aa5.71:1 Good#88224A on #00E9D0
Aa5.71:1 Good#00E9D0 on #88224A
Aa3.96:1 Poor#88224A on #36C1B0
Aa3.96:1 Poor#36C1B0 on #88224A

Color blindness preview

CSS variables

/* Beet Red to Cherry Berry — https://swatchly.xyz/palette/88224a-00e9d0-00231d-36c1b0-a74f68 */
:root {
  --beet-red: #88224a;
  --fake-jade: #00e9d0;
  --nightmare: #00231d;
  --emerald-bliss: #36c1b0;
  --cherry-berry: #a74f68;
}

Tailwind CSS v4

/* Beet Red to Cherry Berry — https://swatchly.xyz/palette/88224a-00e9d0-00231d-36c1b0-a74f68 */
@theme {
  --color-beet-red: #88224a;
  --color-beet-red-50: #fff1f4;
  --color-beet-red-100: #ffe3ea;
  --color-beet-red-200: #ffc4d3;
  --color-beet-red-300: #ff9db9;
  --color-beet-red-400: #e27798;
  --color-beet-red-500: #c3597c;
  --color-beet-red-600: #a23e61;
  --color-beet-red-700: #88224a;
  --color-beet-red-800: #6a1b39;
  --color-beet-red-900: #54112c;
  --color-beet-red-950: #37071a;
  --color-fake-jade: #00e9d0;
  --color-fake-jade-50: #ebfffb;
  --color-fake-jade-100: #c6fff4;
  --color-fake-jade-200: #89f6e3;
  --color-fake-jade-300: #00e9d0;
  --color-fake-jade-400: #00c3ae;
  --color-fake-jade-500: #00a290;
  --color-fake-jade-600: #008273;
  --color-fake-jade-700: #00675b;
  --color-fake-jade-800: #004f46;
  --color-fake-jade-900: #003c35;
  --color-fake-jade-950: #002621;
  --color-nightmare: #00231d;
  --color-nightmare-50: #e6fbf5;
  --color-nightmare-100: #daf1eb;
  --color-nightmare-200: #c3dfd8;
  --color-nightmare-300: #a9c9c1;
  --color-nightmare-400: #87aaa2;
  --color-nightmare-500: #6b8e86;
  --color-nightmare-600: #51736b;
  --color-nightmare-700: #3c5b54;
  --color-nightmare-800: #2b4741;
  --color-nightmare-900: #1f3631;
  --color-nightmare-950: #00231d;
  --color-emerald-bliss: #36c1b0;
  --color-emerald-bliss-50: #e3fffa;
  --color-emerald-bliss-100: #bcfff3;
  --color-emerald-bliss-200: #9cf0e2;
  --color-emerald-bliss-300: #78dccd;
  --color-emerald-bliss-400: #36c1b0;
  --color-emerald-bliss-500: #00a293;
  --color-emerald-bliss-600: #008376;
  --color-emerald-bliss-700: #00675d;
  --color-emerald-bliss-800: #005048;
  --color-emerald-bliss-900: #003d37;
  --color-emerald-bliss-950: #002621;
  --color-cherry-berry: #a74f68;
  --color-cherry-berry-50: #fff1f4;
  --color-cherry-berry-100: #ffe4e9;
  --color-cherry-berry-200: #ffc8d4;
  --color-cherry-berry-300: #fba8bc;
  --color-cherry-berry-400: #df859c;
  --color-cherry-berry-500: #c46982;
  --color-cherry-berry-600: #a74f68;
  --color-cherry-berry-700: #893a51;
  --color-cherry-berry-800: #6f293f;
  --color-cherry-berry-900: #581d2f;
  --color-cherry-berry-950: #3a0f1d;
}