Cacao Nibs to Rosé Color Palette

About this palette

Cacao Nibs to Rosé is a 6-color cool palette: #84412D (Cacao Nibs), #009261 (Viridian), #88E793 (Snarky Mint), #32336E (Good Karma), #211F45 (Azulado), #F8725F (Rosé). It mixes red, green, purple tones and feels cool overall. The strongest text pairing is #88E793 on #211F45 with a contrast ratio of 10.32:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cacao Nibs	rgb(132, 65, 45)	hsl(14, 49%, 35%)
Viridian	rgb(0, 146, 97)	hsl(160, 100%, 29%)
Snarky Mint	rgb(136, 231, 147)	hsl(127, 66%, 72%)
Good Karma	rgb(50, 51, 110)	hsl(239, 38%, 31%)
Azulado	rgb(33, 31, 69)	hsl(243, 38%, 20%)
Rosé	rgb(248, 114, 95)	hsl(7, 92%, 67%)

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.32:1 Very good#88E793 on #211F45
Aa10.32:1 Very good#211F45 on #88E793
Aa7.58:1 Very good#88E793 on #32336E
Aa7.58:1 Very good#32336E on #88E793
Aa5.62:1 Good#211F45 on #F8725F
Aa5.62:1 Good#F8725F on #211F45
Aa5.01:1 Good#84412D on #88E793
Aa5.01:1 Good#88E793 on #84412D

Color blindness preview

CSS variables

/* Cacao Nibs to Rosé — https://swatchly.xyz/palette/84412d-009261-88e793-32336e-211f45-f8725f */
:root {
  --cacao-nibs: #84412d;
  --viridian: #009261;
  --snarky-mint: #88e793;
  --good-karma: #32336e;
  --azulado: #211f45;
  --ros: #f8725f;
}

Tailwind CSS v4

/* Cacao Nibs to Rosé — https://swatchly.xyz/palette/84412d-009261-88e793-32336e-211f45-f8725f */
@theme {
  --color-cacao-nibs: #84412d;
  --color-cacao-nibs-50: #fff2ee;
  --color-cacao-nibs-100: #ffe5dd;
  --color-cacao-nibs-200: #ffcaba;
  --color-cacao-nibs-300: #f2af9b;
  --color-cacao-nibs-400: #d68e78;
  --color-cacao-nibs-500: #ba725c;
  --color-cacao-nibs-600: #9d5843;
  --color-cacao-nibs-700: #84412d;
  --color-cacao-nibs-800: #683222;
  --color-cacao-nibs-900: #532417;
  --color-cacao-nibs-950: #36150b;
  --color-viridian: #009261;
  --color-viridian-50: #d4ffe7;
  --color-viridian-100: #b5f9d5;
  --color-viridian-200: #94e6bc;
  --color-viridian-300: #6fd0a1;
  --color-viridian-400: #3eb07e;
  --color-viridian-500: #009261;
  --color-viridian-600: #00764d;
  --color-viridian-700: #005e3d;
  --color-viridian-800: #004a2f;
  --color-viridian-900: #003a24;
  --color-viridian-950: #002515;
  --color-snarky-mint: #88e793;
  --color-snarky-mint-50: #c8ffcc;
  --color-snarky-mint-100: #b7f5bc;
  --color-snarky-mint-200: #88e793;
  --color-snarky-mint-300: #7dcf86;
  --color-snarky-mint-400: #57b264;
  --color-snarky-mint-500: #379849;
  --color-snarky-mint-600: #197e31;
  --color-snarky-mint-700: #006620;
  --color-snarky-mint-800: #005118;
  --color-snarky-mint-900: #003f11;
  --color-snarky-mint-950: #002807;
  --color-good-karma: #32336e;
  --color-good-karma-50: #f3f4ff;
  --color-good-karma-100: #e7eaff;
  --color-good-karma-200: #cfd4ff;
  --color-good-karma-300: #b3baf7;
  --color-good-karma-400: #9298da;
  --color-good-karma-500: #767bbd;
  --color-good-karma-600: #5b609e;
  --color-good-karma-700: #454980;
  --color-good-karma-800: #32336e;
  --color-good-karma-900: #27284f;
  --color-good-karma-950: #161833;
  --color-azulado: #211f45;
  --color-azulado-50: #f3f4ff;
  --color-azulado-100: #e8e9ff;
  --color-azulado-200: #d2d4f9;
  --color-azulado-300: #bbbde7;
  --color-azulado-400: #9b9dca;
  --color-azulado-500: #8182b0;
  --color-azulado-600: #686995;
  --color-azulado-700: #53547c;
  --color-azulado-800: #424266;
  --color-azulado-900: #343453;
  --color-azulado-950: #211f45;
  --color-ros: #f8725f;
  --color-ros-50: #fff2ef;
  --color-ros-100: #ffe4df;
  --color-ros-200: #ffc8be;
  --color-ros-300: #ffa697;
  --color-ros-400: #f8725f;
  --color-ros-500: #d85544;
  --color-ros-600: #b8392b;
  --color-ros-700: #992317;
  --color-ros-800: #7c1209;
  --color-ros-900: #640702;
  --color-ros-950: #420100;
}