Black Cherry to Cinnapink Color Palette

About this palette

Black Cherry to Cinnapink is a 5-color warm, vintage, monochromatic palette: #311A1D (Black Cherry), #FFC3C0 (Piglet), #763B3D (Cuba Libre), #CF8E95 (Rosetti), #A16663 (Cinnapink). It mixes brown, pink, red tones and feels warm overall. The strongest text pairing is #311A1D on #FFC3C0 with a contrast ratio of 10.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(49, 26, 29)	hsl(352, 31%, 15%)
Piglet	rgb(255, 195, 192)	hsl(3, 100%, 88%)
Cuba Libre	rgb(118, 59, 61)	hsl(358, 33%, 35%)
Rosetti	rgb(207, 142, 149)	hsl(354, 40%, 68%)
Cinnapink	rgb(161, 102, 99)	hsl(3, 25%, 51%)

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.66:1 Very good#311A1D on #FFC3C0
Aa10.66:1 Very good#FFC3C0 on #311A1D
Aa6.14:1 Good#311A1D on #CF8E95
Aa6.14:1 Good#CF8E95 on #311A1D
Aa5.61:1 Good#FFC3C0 on #763B3D
Aa5.61:1 Good#763B3D on #FFC3C0
Aa3.55:1 Poor#311A1D on #A16663
Aa3.55:1 Poor#A16663 on #311A1D

Color blindness preview

CSS variables

/* Black Cherry to Cinnapink — https://swatchly.xyz/palette/311a1d-ffc3c0-763b3d-cf8e95-a16663 */
:root {
  --black-cherry: #311a1d;
  --piglet: #ffc3c0;
  --cuba-libre: #763b3d;
  --rosetti: #cf8e95;
  --cinnapink: #a16663;
}

Tailwind CSS v4

/* Black Cherry to Cinnapink — https://swatchly.xyz/palette/311a1d-ffc3c0-763b3d-cf8e95-a16663 */
@theme {
  --color-black-cherry: #311a1d;
  --color-black-cherry-50: #fff1f2;
  --color-black-cherry-100: #fae5e7;
  --color-black-cherry-200: #e9d1d3;
  --color-black-cherry-300: #d4b9bc;
  --color-black-cherry-400: #b6999c;
  --color-black-cherry-500: #9c7e81;
  --color-black-cherry-600: #806467;
  --color-black-cherry-700: #684f52;
  --color-black-cherry-800: #543d40;
  --color-black-cherry-900: #422f31;
  --color-black-cherry-950: #311a1d;
  --color-piglet: #ffc3c0;
  --color-piglet-50: #ffefed;
  --color-piglet-100: #ffe0de;
  --color-piglet-200: #ffc3c0;
  --color-piglet-300: #e3b0ad;
  --color-piglet-400: #c68f8d;
  --color-piglet-500: #ab7472;
  --color-piglet-600: #8e5b59;
  --color-piglet-700: #744645;
  --color-piglet-800: #5e3534;
  --color-piglet-900: #4a2827;
  --color-piglet-950: #301717;
  --color-cuba-libre: #763b3d;
  --color-cuba-libre-50: #fff1f1;
  --color-cuba-libre-100: #ffe4e3;
  --color-cuba-libre-200: #fdc7c6;
  --color-cuba-libre-300: #e9adac;
  --color-cuba-libre-400: #cb8a8a;
  --color-cuba-libre-500: #ae6d6e;
  --color-cuba-libre-600: #8f5354;
  --color-cuba-libre-700: #763b3d;
  --color-cuba-libre-800: #5c2e2f;
  --color-cuba-libre-900: #492223;
  --color-cuba-libre-950: #2f1314;
  --color-rosetti: #cf8e95;
  --color-rosetti-50: #fff2f3;
  --color-rosetti-100: #ffe4e6;
  --color-rosetti-200: #fcc9ce;
  --color-rosetti-300: #eab0b6;
  --color-rosetti-400: #cf8e95;
  --color-rosetti-500: #b1737a;
  --color-rosetti-600: #945960;
  --color-rosetti-700: #79444b;
  --color-rosetti-800: #613339;
  --color-rosetti-900: #4c252b;
  --color-rosetti-950: #311519;
  --color-cinnapink: #a16663;
  --color-cinnapink-50: #fff2f0;
  --color-cinnapink-100: #ffe7e5;
  --color-cinnapink-200: #ffcfcb;
  --color-cinnapink-300: #efb8b5;
  --color-cinnapink-400: #d49995;
  --color-cinnapink-500: #bb7f7b;
  --color-cinnapink-600: #a16663;
  --color-cinnapink-700: #844e4c;
  --color-cinnapink-800: #6a3b39;
  --color-cinnapink-900: #532b2a;
  --color-cinnapink-950: #361918;
}