Black Stallion to Hazelnut Chocolate Color Palette

About this palette

Black Stallion to Hazelnut Chocolate is a 4-color vintage palette: #0C1721 (Black Stallion), #00BCAD (Super Rare Jade), #FFE1D2 (Glazed Sugar), #813A00 (Hazelnut Chocolate). It mixes black, turquoise, orange, brown tones and feels warm overall. The strongest text pairing is #0C1721 on #FFE1D2 with a contrast ratio of 14.61:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(12, 23, 33)	hsl(209, 47%, 9%)
Super Rare Jade	rgb(0, 188, 173)	hsl(175, 100%, 37%)
Glazed Sugar	rgb(255, 225, 210)	hsl(20, 100%, 91%)
Hazelnut Chocolate	rgb(129, 58, 0)	hsl(27, 100%, 25%)

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.

Aa14.61:1 Super#0C1721 on #FFE1D2
Aa14.61:1 Super#FFE1D2 on #0C1721
Aa7.58:1 Very good#0C1721 on #00BCAD
Aa7.58:1 Very good#00BCAD on #0C1721
Aa6.68:1 Good#FFE1D2 on #813A00
Aa6.68:1 Good#813A00 on #FFE1D2
Aa3.47:1 Poor#00BCAD on #813A00
Aa3.47:1 Poor#813A00 on #00BCAD

Color blindness preview

CSS variables

/* Black Stallion to Hazelnut Chocolate — https://swatchly.xyz/palette/0c1721-00bcad-ffe1d2-813a00 */
:root {
  --black-stallion: #0c1721;
  --super-rare-jade: #00bcad;
  --glazed-sugar: #ffe1d2;
  --hazelnut-chocolate: #813a00;
}

Tailwind CSS v4

/* Black Stallion to Hazelnut Chocolate — https://swatchly.xyz/palette/0c1721-00bcad-ffe1d2-813a00 */
@theme {
  --color-black-stallion: #0c1721;
  --color-black-stallion-50: #eef6fe;
  --color-black-stallion-100: #e3ecf6;
  --color-black-stallion-200: #ced9e4;
  --color-black-stallion-300: #b6c3cf;
  --color-black-stallion-400: #96a3b0;
  --color-black-stallion-500: #788693;
  --color-black-stallion-600: #5d6a76;
  --color-black-stallion-700: #46515c;
  --color-black-stallion-800: #333d46;
  --color-black-stallion-900: #242b33;
  --color-black-stallion-950: #0c1721;
  --color-super-rare-jade: #00bcad;
  --color-super-rare-jade-50: #d9fff9;
  --color-super-rare-jade-100: #b0fef2;
  --color-super-rare-jade-200: #8eede0;
  --color-super-rare-jade-300: #65d9cb;
  --color-super-rare-jade-400: #00bcad;
  --color-super-rare-jade-500: #009c90;
  --color-super-rare-jade-600: #007e74;
  --color-super-rare-jade-700: #00645c;
  --color-super-rare-jade-800: #004e47;
  --color-super-rare-jade-900: #003c37;
  --color-super-rare-jade-950: #002622;
  --color-glazed-sugar: #ffe1d2;
  --color-glazed-sugar-50: #ffefe7;
  --color-glazed-sugar-100: #ffe1d2;
  --color-glazed-sugar-200: #e6d0c5;
  --color-glazed-sugar-300: #d2b9ad;
  --color-glazed-sugar-400: #b49a8c;
  --color-glazed-sugar-500: #9a7f71;
  --color-glazed-sugar-600: #7e6558;
  --color-glazed-sugar-700: #665044;
  --color-glazed-sugar-800: #513d33;
  --color-glazed-sugar-900: #3f2f26;
  --color-glazed-sugar-950: #281c16;
  --color-hazelnut-chocolate: #813a00;
  --color-hazelnut-chocolate-50: #fff2eb;
  --color-hazelnut-chocolate-100: #ffe5d7;
  --color-hazelnut-chocolate-200: #ffcaac;
  --color-hazelnut-chocolate-300: #f3ad85;
  --color-hazelnut-chocolate-400: #d68a5e;
  --color-hazelnut-chocolate-500: #b96d3f;
  --color-hazelnut-chocolate-600: #9a5225;
  --color-hazelnut-chocolate-700: #813a00;
  --color-hazelnut-chocolate-800: #652d03;
  --color-hazelnut-chocolate-900: #502100;
  --color-hazelnut-chocolate-950: #341300;
}