Black Chocolate to Abyssal Waters Color Palette

About this palette

Black Chocolate to Abyssal Waters is a 5-color warm palette: #3C0E00 (Black Chocolate), #BA4C48 (Conker), #FD7673 (Embarrassment), #7BE4FF (Winter Wizard), #005867 (Abyssal Waters). It mixes brown, red, blue, turquoise tones and feels warm overall. The strongest text pairing is #3C0E00 on #7BE4FF with a contrast ratio of 11.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Chocolate	rgb(60, 14, 0)	hsl(14, 100%, 12%)
Conker	rgb(186, 76, 72)	hsl(2, 45%, 51%)
Embarrassment	rgb(253, 118, 115)	hsl(1, 97%, 72%)
Winter Wizard	rgb(123, 228, 255)	hsl(192, 100%, 74%)
Abyssal Waters	rgb(0, 88, 103)	hsl(189, 100%, 20%)

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.46:1 Very good#3C0E00 on #7BE4FF
Aa11.46:1 Very good#7BE4FF on #3C0E00
Aa6.39:1 Good#3C0E00 on #FD7673
Aa6.39:1 Good#FD7673 on #3C0E00
Aa5.55:1 Good#7BE4FF on #005867
Aa5.55:1 Good#005867 on #7BE4FF
Aa3.41:1 Poor#BA4C48 on #7BE4FF
Aa3.41:1 Poor#7BE4FF on #BA4C48

Color blindness preview

CSS variables

/* Black Chocolate to Abyssal Waters — https://swatchly.xyz/palette/3c0e00-ba4c48-fd7673-7be4ff-005867 */
:root {
  --black-chocolate: #3c0e00;
  --conker: #ba4c48;
  --embarrassment: #fd7673;
  --winter-wizard: #7be4ff;
  --abyssal-waters: #005867;
}

Tailwind CSS v4

/* Black Chocolate to Abyssal Waters — https://swatchly.xyz/palette/3c0e00-ba4c48-fd7673-7be4ff-005867 */
@theme {
  --color-black-chocolate: #3c0e00;
  --color-black-chocolate-50: #fff2ee;
  --color-black-chocolate-100: #ffe5dc;
  --color-black-chocolate-200: #faccbc;
  --color-black-chocolate-300: #e7b3a2;
  --color-black-chocolate-400: #ca927f;
  --color-black-chocolate-500: #af7663;
  --color-black-chocolate-600: #925d4b;
  --color-black-chocolate-700: #774737;
  --color-black-chocolate-800: #603628;
  --color-black-chocolate-900: #4c281c;
  --color-black-chocolate-950: #3c0e00;
  --color-conker: #ba4c48;
  --color-conker-50: #fff2f0;
  --color-conker-100: #ffe6e4;
  --color-conker-200: #ffcdc8;
  --color-conker-300: #ffada6;
  --color-conker-400: #f1837c;
  --color-conker-500: #d76761;
  --color-conker-600: #ba4c48;
  --color-conker-700: #9a3533;
  --color-conker-800: #7d2323;
  --color-conker-900: #641617;
  --color-conker-950: #42090b;
  --color-embarrassment: #fd7673;
  --color-embarrassment-50: #fff4f3;
  --color-embarrassment-100: #ffe7e5;
  --color-embarrassment-200: #ffcdc9;
  --color-embarrassment-300: #ffaba6;
  --color-embarrassment-400: #fd7673;
  --color-embarrassment-500: #dc5958;
  --color-embarrassment-600: #bb3b3e;
  --color-embarrassment-700: #9b242a;
  --color-embarrassment-800: #7e131c;
  --color-embarrassment-900: #640711;
  --color-embarrassment-950: #420107;
  --color-winter-wizard: #7be4ff;
  --color-winter-wizard-50: #ddf7ff;
  --color-winter-wizard-100: #bff1ff;
  --color-winter-wizard-200: #7be4ff;
  --color-winter-wizard-300: #74cce3;
  --color-winter-wizard-400: #46aec7;
  --color-winter-wizard-500: #1993ac;
  --color-winter-wizard-600: #00778d;
  --color-winter-wizard-700: #005f71;
  --color-winter-wizard-800: #004b5a;
  --color-winter-wizard-900: #003a46;
  --color-winter-wizard-950: #00242c;
  --color-abyssal-waters: #005867;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #c9f4fe;
  --color-abyssal-waters-200: #ace0ed;
  --color-abyssal-waters-300: #8dc9d8;
  --color-abyssal-waters-400: #66a9b9;
  --color-abyssal-waters-500: #468c9c;
  --color-abyssal-waters-600: #2a707f;
  --color-abyssal-waters-700: #005867;
  --color-abyssal-waters-800: #064450;
  --color-abyssal-waters-900: #01353f;
  --color-abyssal-waters-950: #002128;
}