Black Cherry to Blushing Cinnamon Color Palette

About this palette

Black Cherry to Blushing Cinnamon is a 5-color warm palette: #2F1525 (Black Cherry), #6E0058 (Velvet), #00798B (Bermuda), #2EC192 (Macau), #FFC09E (Blushing Cinnamon). It mixes red, purple, turquoise, orange tones and feels warm overall. The strongest text pairing is #2F1525 on #FFC09E with a contrast ratio of 10.59:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(47, 21, 37)	hsl(323, 38%, 13%)
Velvet	rgb(110, 0, 88)	hsl(312, 100%, 22%)
Bermuda	rgb(0, 121, 139)	hsl(188, 100%, 27%)
Macau	rgb(46, 193, 146)	hsl(161, 62%, 47%)
Blushing Cinnamon	rgb(255, 192, 158)	hsl(21, 100%, 81%)

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.59:1 Very good#2F1525 on #FFC09E
Aa10.59:1 Very good#FFC09E on #2F1525
Aa7.36:1 Very good#6E0058 on #FFC09E
Aa7.36:1 Very good#FFC09E on #6E0058
Aa7.30:1 Very good#2F1525 on #2EC192
Aa7.30:1 Very good#2EC192 on #2F1525
Aa5.08:1 Good#6E0058 on #2EC192
Aa5.08:1 Good#2EC192 on #6E0058

Color blindness preview

CSS variables

/* Black Cherry to Blushing Cinnamon — https://swatchly.xyz/palette/2f1525-6e0058-00798b-2ec192-ffc09e */
:root {
  --black-cherry: #2f1525;
  --velvet: #6e0058;
  --bermuda: #00798b;
  --macau: #2ec192;
  --blushing-cinnamon: #ffc09e;
}

Tailwind CSS v4

/* Black Cherry to Blushing Cinnamon — https://swatchly.xyz/palette/2f1525-6e0058-00798b-2ec192-ffc09e */
@theme {
  --color-black-cherry: #2f1525;
  --color-black-cherry-50: #fff0f8;
  --color-black-cherry-100: #fbe4f0;
  --color-black-cherry-200: #eacedd;
  --color-black-cherry-300: #d5b7c8;
  --color-black-cherry-400: #b896a9;
  --color-black-cherry-500: #9c7b8e;
  --color-black-cherry-600: #806173;
  --color-black-cherry-700: #684b5c;
  --color-black-cherry-800: #523a48;
  --color-black-cherry-900: #402b37;
  --color-black-cherry-950: #2f1525;
  --color-velvet: #6e0058;
  --color-velvet-50: #fff0f9;
  --color-velvet-100: #ffe1f4;
  --color-velvet-200: #ffc2ea;
  --color-velvet-300: #fa9cdc;
  --color-velvet-400: #dd77be;
  --color-velvet-500: #bf58a2;
  --color-velvet-600: #9f3d85;
  --color-velvet-700: #81286b;
  --color-velvet-800: #6e0058;
  --color-velvet-900: #510f41;
  --color-velvet-950: #350629;
  --color-bermuda: #00798b;
  --color-bermuda-50: #e3faff;
  --color-bermuda-100: #c6f5ff;
  --color-bermuda-200: #a2e4f2;
  --color-bermuda-300: #82cfdf;
  --color-bermuda-400: #57b0c2;
  --color-bermuda-500: #3294a7;
  --color-bermuda-600: #00798b;
  --color-bermuda-700: #00606f;
  --color-bermuda-800: #004b57;
  --color-bermuda-900: #003a44;
  --color-bermuda-950: #00242b;
  --color-macau: #2ec192;
  --color-macau-50: #e1fff1;
  --color-macau-100: #bcffe2;
  --color-macau-200: #97f0cc;
  --color-macau-300: #73ddb4;
  --color-macau-400: #2ec192;
  --color-macau-500: #00a277;
  --color-macau-600: #008360;
  --color-macau-700: #00684b;
  --color-macau-800: #00513a;
  --color-macau-900: #003e2b;
  --color-macau-950: #00271a;
  --color-blushing-cinnamon: #ffc09e;
  --color-blushing-cinnamon-50: #ffece1;
  --color-blushing-cinnamon-100: #ffddcb;
  --color-blushing-cinnamon-200: #ffc09e;
  --color-blushing-cinnamon-300: #e3ad90;
  --color-blushing-cinnamon-400: #c78e6e;
  --color-blushing-cinnamon-500: #ad7353;
  --color-blushing-cinnamon-600: #915a3c;
  --color-blushing-cinnamon-700: #77462a;
  --color-blushing-cinnamon-800: #61361d;
  --color-blushing-cinnamon-900: #4c2812;
  --color-blushing-cinnamon-950: #311708;
}