Start generating

Chestnut to Cloud Number Nine color palette

752F01Chestnut904D2FGingerbreadAB6C54HazelnutC78B78Ginger ScentE3AA9DSun-Kissed BeachFFCBC4Cloud Number Nine
Open in generator Export PNG, PDF, ASE…

About this palette

Chestnut to Cloud Number Nine is a 6-color warm, vintage, monochromatic, gradient palette: #752F01 (Chestnut), #904D2F (Gingerbread), #AB6C54 (Hazelnut), #C78B78 (Ginger Scent), #E3AA9D (Sun-Kissed Beach), #FFCBC4 (Cloud Number Nine). It mixes brown, orange, red, pink tones and feels warm overall. The strongest text pairing is #752F01 on #FFCBC4 with a contrast ratio of 6.74:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Chestnutrgb(117, 47, 1)hsl(24, 98%, 23%)
Gingerbreadrgb(144, 77, 47)hsl(19, 51%, 37%)
Hazelnutrgb(171, 108, 84)hsl(17, 34%, 50%)
Ginger Scentrgb(199, 139, 120)hsl(14, 41%, 63%)
Sun-Kissed Beachrgb(227, 170, 157)hsl(11, 56%, 75%)
Cloud Number Ninergb(255, 203, 196)hsl(7, 100%, 88%)

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.

  • Aa6.74:1 Good#752F01 on #FFCBC4
  • Aa6.74:1 Good#FFCBC4 on #752F01
  • Aa4.85:1 Good#752F01 on #E3AA9D
  • Aa4.85:1 Good#E3AA9D on #752F01
  • Aa4.44:1 Poor#904D2F on #FFCBC4
  • Aa4.44:1 Poor#FFCBC4 on #904D2F
  • Aa3.42:1 Poor#752F01 on #C78B78
  • Aa3.42:1 Poor#C78B78 on #752F01

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Chestnut to Cloud Number Nine — https://swatchly.xyz/palette/752f01-904d2f-ab6c54-c78b78-e3aa9d-ffcbc4 */
:root {
  --chestnut: #752f01;
  --gingerbread: #904d2f;
  --hazelnut: #ab6c54;
  --ginger-scent: #c78b78;
  --sun-kissed-beach: #e3aa9d;
  --cloud-number-nine: #ffcbc4;
}

Tailwind CSS v4

/* Chestnut to Cloud Number Nine — https://swatchly.xyz/palette/752f01-904d2f-ab6c54-c78b78-e3aa9d-ffcbc4 */
@theme {
  --color-chestnut: #752f01;
  --color-chestnut-50: #fff2ec;
  --color-chestnut-100: #ffe5d9;
  --color-chestnut-200: #ffcab2;
  --color-chestnut-300: #f5af8e;
  --color-chestnut-400: #da8e69;
  --color-chestnut-500: #bf724d;
  --color-chestnut-600: #a25934;
  --color-chestnut-700: #884421;
  --color-chestnut-800: #752f01;
  --color-chestnut-900: #592608;
  --color-chestnut-950: #3b1602;
  --color-gingerbread: #904d2f;
  --color-gingerbread-50: #fff2ed;
  --color-gingerbread-100: #ffe2d6;
  --color-gingerbread-200: #ffc5ac;
  --color-gingerbread-300: #ecaa8d;
  --color-gingerbread-400: #cd8668;
  --color-gingerbread-500: #af694a;
  --color-gingerbread-600: #904d2f;
  --color-gingerbread-700: #753b21;
  --color-gingerbread-800: #5e2c15;
  --color-gingerbread-900: #4b210d;
  --color-gingerbread-950: #311305;
  --color-hazelnut: #ab6c54;
  --color-hazelnut-50: #fff0eb;
  --color-hazelnut-100: #ffe1d6;
  --color-hazelnut-200: #fbc5b1;
  --color-hazelnut-300: #e7ab95;
  --color-hazelnut-400: #c98971;
  --color-hazelnut-500: #ab6c54;
  --color-hazelnut-600: #8f543d;
  --color-hazelnut-700: #75402c;
  --color-hazelnut-800: #5e311f;
  --color-hazelnut-900: #4b2415;
  --color-hazelnut-950: #31150a;
  --color-ginger-scent: #c78b78;
  --color-ginger-scent-50: #ffefea;
  --color-ginger-scent-100: #ffe1d7;
  --color-ginger-scent-200: #f8c7b7;
  --color-ginger-scent-300: #e4ad9c;
  --color-ginger-scent-400: #c78b78;
  --color-ginger-scent-500: #ab715f;
  --color-ginger-scent-600: #8e5847;
  --color-ginger-scent-700: #754434;
  --color-ginger-scent-800: #5e3426;
  --color-ginger-scent-900: #4b271b;
  --color-ginger-scent-950: #31170f;
  --color-sun-kissed-beach: #e3aa9d;
  --color-sun-kissed-beach-50: #ffede9;
  --color-sun-kissed-beach-100: #ffded6;
  --color-sun-kissed-beach-200: #f3c5bb;
  --color-sun-kissed-beach-300: #e3aa9d;
  --color-sun-kissed-beach-400: #c28d81;
  --color-sun-kissed-beach-500: #a77266;
  --color-sun-kissed-beach-600: #8c5a4f;
  --color-sun-kissed-beach-700: #72463c;
  --color-sun-kissed-beach-800: #5c352d;
  --color-sun-kissed-beach-900: #4a2821;
  --color-sun-kissed-beach-950: #301813;
  --color-cloud-number-nine: #ffcbc4;
  --color-cloud-number-nine-50: #fff3f2;
  --color-cloud-number-nine-100: #ffe6e3;
  --color-cloud-number-nine-200: #ffcbc4;
  --color-cloud-number-nine-300: #e2b7b1;
  --color-cloud-number-nine-400: #c4958f;
  --color-cloud-number-nine-500: #a87973;
  --color-cloud-number-nine-600: #8c5f5a;
  --color-cloud-number-nine-700: #714945;
  --color-cloud-number-nine-800: #5a3834;
  --color-cloud-number-nine-900: #472a26;
  --color-cloud-number-nine-950: #2e1916;
}

Similar palettes