Cacao Nibs to Persimmon Color Palette

About this palette

Cacao Nibs to Persimmon is a 5-color warm, earthy, vintage palette: #813F1E (Cacao Nibs), #FFD3DC (Creamy Strawberry), #43170A (Old Study), #BF647D (Malevolent Mauve), #E69735 (Persimmon). It mixes brown, pink, orange tones and feels warm overall. The strongest text pairing is #FFD3DC on #43170A with a contrast ratio of 11.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cacao Nibs	rgb(129, 63, 30)	hsl(20, 62%, 31%)
Creamy Strawberry	rgb(255, 211, 220)	hsl(348, 100%, 91%)
Old Study	rgb(67, 23, 10)	hsl(14, 74%, 15%)
Malevolent Mauve	rgb(191, 100, 125)	hsl(344, 42%, 57%)
Persimmon	rgb(230, 151, 53)	hsl(33, 78%, 55%)

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.

Aa11.43:1 Very good#FFD3DC on #43170A
Aa11.43:1 Very good#43170A on #FFD3DC
Aa6.48:1 Good#43170A on #E69735
Aa6.48:1 Good#E69735 on #43170A
Aa5.86:1 Good#813F1E on #FFD3DC
Aa5.86:1 Good#FFD3DC on #813F1E
Aa3.91:1 Poor#43170A on #BF647D
Aa3.91:1 Poor#BF647D on #43170A

Color blindness preview

CSS variables

/* Cacao Nibs to Persimmon — https://swatchly.xyz/palette/813f1e-ffd3dc-43170a-bf647d-e69735 */
:root {
  --cacao-nibs: #813f1e;
  --creamy-strawberry: #ffd3dc;
  --old-study: #43170a;
  --malevolent-mauve: #bf647d;
  --persimmon: #e69735;
}

Tailwind CSS v4

/* Cacao Nibs to Persimmon — https://swatchly.xyz/palette/813f1e-ffd3dc-43170a-bf647d-e69735 */
@theme {
  --color-cacao-nibs: #813f1e;
  --color-cacao-nibs-50: #fff2ec;
  --color-cacao-nibs-100: #ffe5da;
  --color-cacao-nibs-200: #ffcab2;
  --color-cacao-nibs-300: #f1af92;
  --color-cacao-nibs-400: #d48d6d;
  --color-cacao-nibs-500: #b87150;
  --color-cacao-nibs-600: #9a5737;
  --color-cacao-nibs-700: #813f1e;
  --color-cacao-nibs-800: #653116;
  --color-cacao-nibs-900: #50240d;
  --color-cacao-nibs-950: #341405;
  --color-creamy-strawberry: #ffd3dc;
  --color-creamy-strawberry-50: #fff9fa;
  --color-creamy-strawberry-100: #ffedf1;
  --color-creamy-strawberry-200: #ffd3dc;
  --color-creamy-strawberry-300: #e1bdc5;
  --color-creamy-strawberry-400: #c29ba3;
  --color-creamy-strawberry-500: #a57e86;
  --color-creamy-strawberry-600: #88626b;
  --color-creamy-strawberry-700: #6d4c53;
  --color-creamy-strawberry-800: #56393f;
  --color-creamy-strawberry-900: #432b30;
  --color-creamy-strawberry-950: #2b191e;
  --color-old-study: #43170a;
  --color-old-study-50: #fff2ee;
  --color-old-study-100: #ffe5dd;
  --color-old-study-200: #f8ccbf;
  --color-old-study-300: #e5b4a5;
  --color-old-study-400: #c89383;
  --color-old-study-500: #ae7969;
  --color-old-study-600: #936051;
  --color-old-study-700: #7a4c3e;
  --color-old-study-800: #653b2f;
  --color-old-study-900: #532e24;
  --color-old-study-950: #43170a;
  --color-malevolent-mauve: #bf647d;
  --color-malevolent-mauve-50: #fff1f4;
  --color-malevolent-mauve-100: #ffe2e8;
  --color-malevolent-mauve-200: #ffc5d2;
  --color-malevolent-mauve-300: #f8a4b9;
  --color-malevolent-mauve-400: #dc8199;
  --color-malevolent-mauve-500: #bf647d;
  --color-malevolent-mauve-600: #a14a63;
  --color-malevolent-mauve-700: #84364e;
  --color-malevolent-mauve-800: #6b273c;
  --color-malevolent-mauve-900: #551b2e;
  --color-malevolent-mauve-950: #380e1c;
  --color-persimmon: #e69735;
  --color-persimmon-50: #fff7ef;
  --color-persimmon-100: #ffeddb;
  --color-persimmon-200: #ffd6ab;
  --color-persimmon-300: #fcba72;
  --color-persimmon-400: #e69735;
  --color-persimmon-500: #c67a00;
  --color-persimmon-600: #a06100;
  --color-persimmon-700: #7f4c00;
  --color-persimmon-800: #633a00;
  --color-persimmon-900: #4c2c00;
  --color-persimmon-950: #301900;
}