Hazel to French Oak Color Palette

About this palette

Hazel to French Oak is a 5-color cool, vintage palette: #A16E49 (Hazel), #09443D (Botanical Night), #87E8E2 (Aqua Fiesta), #5F4F8E (Freshly Purpleized), #C0987A (French Oak). It mixes orange, turquoise, purple tones and feels cool overall. The strongest text pairing is #09443D on #87E8E2 with a contrast ratio of 7.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hazel	rgb(161, 110, 73)	hsl(25, 38%, 46%)
Botanical Night	rgb(9, 68, 61)	hsl(173, 77%, 15%)
Aqua Fiesta	rgb(135, 232, 226)	hsl(176, 68%, 72%)
Freshly Purpleized	rgb(95, 79, 142)	hsl(255, 29%, 43%)
French Oak	rgb(192, 152, 122)	hsl(26, 36%, 62%)

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.

Aa7.70:1 Very good#09443D on #87E8E2
Aa7.70:1 Very good#87E8E2 on #09443D
Aa4.90:1 Good#87E8E2 on #5F4F8E
Aa4.90:1 Good#5F4F8E on #87E8E2
Aa4.20:1 Poor#09443D on #C0987A
Aa4.20:1 Poor#C0987A on #09443D
Aa3.03:1 Poor#A16E49 on #87E8E2
Aa3.03:1 Poor#87E8E2 on #A16E49

Color blindness preview

CSS variables

/* Hazel to French Oak — https://swatchly.xyz/palette/a16e49-09443d-87e8e2-5f4f8e-c0987a */
:root {
  --hazel: #a16e49;
  --botanical-night: #09443d;
  --aqua-fiesta: #87e8e2;
  --freshly-purpleized: #5f4f8e;
  --french-oak: #c0987a;
}

Tailwind CSS v4

/* Hazel to French Oak — https://swatchly.xyz/palette/a16e49-09443d-87e8e2-5f4f8e-c0987a */
@theme {
  --color-hazel: #a16e49;
  --color-hazel-50: #fff0e6;
  --color-hazel-100: #ffe0cc;
  --color-hazel-200: #f3c7a9;
  --color-hazel-300: #dead8b;
  --color-hazel-400: #bf8b66;
  --color-hazel-500: #a16e49;
  --color-hazel-600: #865633;
  --color-hazel-700: #6d4323;
  --color-hazel-800: #583317;
  --color-hazel-900: #46270e;
  --color-hazel-950: #2e1706;
  --color-botanical-night: #09443d;
  --color-botanical-night-50: #dffdf7;
  --color-botanical-night-100: #d2f4ed;
  --color-botanical-night-200: #b9e1da;
  --color-botanical-night-300: #9eccc4;
  --color-botanical-night-400: #7cafa6;
  --color-botanical-night-500: #60958c;
  --color-botanical-night-600: #477b73;
  --color-botanical-night-700: #34655d;
  --color-botanical-night-800: #25524b;
  --color-botanical-night-900: #09443d;
  --color-botanical-night-950: #0d2b27;
  --color-aqua-fiesta: #87e8e2;
  --color-aqua-fiesta-50: #ccfffb;
  --color-aqua-fiesta-100: #bbf6f1;
  --color-aqua-fiesta-200: #87e8e2;
  --color-aqua-fiesta-300: #7ecfca;
  --color-aqua-fiesta-400: #53b1ac;
  --color-aqua-fiesta-500: #2f9691;
  --color-aqua-fiesta-600: #007b77;
  --color-aqua-fiesta-700: #00625f;
  --color-aqua-fiesta-800: #004d4a;
  --color-aqua-fiesta-900: #003c39;
  --color-aqua-fiesta-950: #002524;
  --color-freshly-purpleized: #5f4f8e;
  --color-freshly-purpleized-50: #f5f3ff;
  --color-freshly-purpleized-100: #ece8ff;
  --color-freshly-purpleized-200: #dad1ff;
  --color-freshly-purpleized-300: #c6b9f5;
  --color-freshly-purpleized-400: #a899db;
  --color-freshly-purpleized-500: #8e7ec1;
  --color-freshly-purpleized-600: #7465a5;
  --color-freshly-purpleized-700: #5f4f8e;
  --color-freshly-purpleized-800: #4a3d71;
  --color-freshly-purpleized-900: #392e5a;
  --color-freshly-purpleized-950: #241b3c;
  --color-french-oak: #c0987a;
  --color-french-oak-50: #fff2e9;
  --color-french-oak-100: #ffe6d3;
  --color-french-oak-200: #f0d0b9;
  --color-french-oak-300: #dcb99f;
  --color-french-oak-400: #c0987a;
  --color-french-oak-500: #a37d60;
  --color-french-oak-600: #876347;
  --color-french-oak-700: #6e4d33;
  --color-french-oak-800: #583b25;
  --color-french-oak-900: #452d19;
  --color-french-oak-950: #2c1b0d;
}