Stone Age Queen to Black Chocolate color palette

7D3A24Stone Age Queen FFBBA7Cream Puff B64C00Bolognese FF7018Arancio 401401Black Chocolate

About this palette

Stone Age Queen to Black Chocolate is a 5-color warm, monochromatic palette: #7D3A24 (Stone Age Queen), #FFBBA7 (Cream Puff), #B64C00 (Bolognese), #FF7018 (Arancio), #401401 (Black Chocolate). It mixes red, pink, brown, orange tones and feels warm overall. The strongest text pairing is #FFBBA7 on #401401 with a contrast ratio of 9.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stone Age Queen	rgb(125, 58, 36)	hsl(15, 55%, 32%)
Cream Puff	rgb(255, 187, 167)	hsl(14, 100%, 83%)
Bolognese	rgb(182, 76, 0)	hsl(25, 100%, 36%)
Arancio	rgb(255, 112, 24)	hsl(23, 100%, 55%)
Black Chocolate	rgb(64, 20, 1)	hsl(18, 97%, 13%)

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.

Aa9.80:1 Very good#FFBBA7 on #401401
Aa9.80:1 Very good#401401 on #FFBBA7
Aa5.75:1 Good#FF7018 on #401401
Aa5.75:1 Good#401401 on #FF7018
Aa5.16:1 Good#7D3A24 on #FFBBA7
Aa5.16:1 Good#FFBBA7 on #7D3A24
Aa3.21:1 Poor#FFBBA7 on #B64C00
Aa3.21:1 Poor#B64C00 on #FFBBA7

Color blindness preview

CSS variables

/* Stone Age Queen to Black Chocolate — https://swatchly.xyz/palette/7d3a24-ffbba7-b64c00-ff7018-401401 */
:root {
  --stone-age-queen: #7d3a24;
  --cream-puff: #ffbba7;
  --bolognese: #b64c00;
  --arancio: #ff7018;
  --black-chocolate: #401401;
}

Tailwind CSS v4

/* Stone Age Queen to Black Chocolate — https://swatchly.xyz/palette/7d3a24-ffbba7-b64c00-ff7018-401401 */
@theme {
  --color-stone-age-queen: #7d3a24;
  --color-stone-age-queen-50: #fff2ee;
  --color-stone-age-queen-100: #ffe5dc;
  --color-stone-age-queen-200: #ffc8b6;
  --color-stone-age-queen-300: #f0ac97;
  --color-stone-age-queen-400: #d38a72;
  --color-stone-age-queen-500: #b56d55;
  --color-stone-age-queen-600: #96523c;
  --color-stone-age-queen-700: #7d3a24;
  --color-stone-age-queen-800: #622d1c;
  --color-stone-age-queen-900: #4d2112;
  --color-stone-age-queen-950: #321208;
  --color-cream-puff: #ffbba7;
  --color-cream-puff-50: #ffe9e2;
  --color-cream-puff-100: #ffd9ce;
  --color-cream-puff-200: #ffbba7;
  --color-cream-puff-300: #e4a997;
  --color-cream-puff-400: #c88a77;
  --color-cream-puff-500: #ad705d;
  --color-cream-puff-600: #925746;
  --color-cream-puff-700: #784434;
  --color-cream-puff-800: #623426;
  --color-cream-puff-900: #4d261b;
  --color-cream-puff-950: #32160e;
  --color-bolognese: #b64c00;
  --color-bolognese-50: #fff2ec;
  --color-bolognese-100: #ffe6db;
  --color-bolognese-200: #ffcdb6;
  --color-bolognese-300: #ffad87;
  --color-bolognese-400: #ef8550;
  --color-bolognese-500: #d3672d;
  --color-bolognese-600: #b64c00;
  --color-bolognese-700: #923b00;
  --color-bolognese-800: #732d00;
  --color-bolognese-900: #5a2100;
  --color-bolognese-950: #3a1300;
  --color-arancio: #ff7018;
  --color-arancio-50: #fff2ec;
  --color-arancio-100: #ffe5d9;
  --color-arancio-200: #ffcab2;
  --color-arancio-300: #ffa981;
  --color-arancio-400: #ff7018;
  --color-arancio-500: #d85a00;
  --color-arancio-600: #af4700;
  --color-arancio-700: #8c3700;
  --color-arancio-800: #6f2a00;
  --color-arancio-900: #571f00;
  --color-arancio-950: #381100;
  --color-black-chocolate: #401401;
  --color-black-chocolate-50: #fff2ed;
  --color-black-chocolate-100: #ffe5db;
  --color-black-chocolate-200: #f8ccbb;
  --color-black-chocolate-300: #e6b4a0;
  --color-black-chocolate-400: #c9937e;
  --color-black-chocolate-500: #ae7863;
  --color-black-chocolate-600: #925f4a;
  --color-black-chocolate-700: #794a38;
  --color-black-chocolate-800: #633a29;
  --color-black-chocolate-900: #502c1e;
  --color-black-chocolate-950: #401401;
}