Outback to Grapes of Italy color palette

CF9D77Outback 583F29Peat Brown 55A298Emerald Oasis A7F1E5Pale King’s Blue 6E4780Grapes of Italy

About this palette

Outback to Grapes of Italy is a 5-color cool, vintage palette: #CF9D77 (Outback), #583F29 (Peat Brown), #55A298 (Emerald Oasis), #A7F1E5 (Pale King’s Blue), #6E4780 (Grapes of Italy). It mixes orange, brown, turquoise, purple tones and feels cool overall. The strongest text pairing is #583F29 on #A7F1E5 with a contrast ratio of 7.58:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Outback	rgb(207, 157, 119)	hsl(26, 48%, 64%)
Peat Brown	rgb(88, 63, 41)	hsl(28, 36%, 25%)
Emerald Oasis	rgb(85, 162, 152)	hsl(172, 31%, 48%)
Pale King’s Blue	rgb(167, 241, 229)	hsl(170, 73%, 80%)
Grapes of Italy	rgb(110, 71, 128)	hsl(281, 29%, 39%)

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.58:1 Very good#583F29 on #A7F1E5
Aa7.58:1 Very good#A7F1E5 on #583F29
Aa5.69:1 Good#A7F1E5 on #6E4780
Aa5.69:1 Good#6E4780 on #A7F1E5
Aa4.05:1 Poor#CF9D77 on #583F29
Aa4.05:1 Poor#583F29 on #CF9D77
Aa3.25:1 Poor#583F29 on #55A298
Aa3.25:1 Poor#55A298 on #583F29

Color blindness preview

CSS variables

/* Outback to Grapes of Italy — https://swatchly.xyz/palette/cf9d77-583f29-55a298-a7f1e5-6e4780 */
:root {
  --outback: #cf9d77;
  --peat-brown: #583f29;
  --emerald-oasis: #55a298;
  --pale-king-s-blue: #a7f1e5;
  --grapes-of-italy: #6e4780;
}

Tailwind CSS v4

/* Outback to Grapes of Italy — https://swatchly.xyz/palette/cf9d77-583f29-55a298-a7f1e5-6e4780 */
@theme {
  --color-outback: #cf9d77;
  --color-outback-50: #fff6ef;
  --color-outback-100: #ffebdc;
  --color-outback-200: #fad4b9;
  --color-outback-300: #e8be9e;
  --color-outback-400: #cf9d77;
  --color-outback-500: #b0805b;
  --color-outback-600: #936541;
  --color-outback-700: #774e2c;
  --color-outback-800: #5f3b1d;
  --color-outback-900: #4a2c12;
  --color-outback-950: #2f1907;
  --color-peat-brown: #583f29;
  --color-peat-brown-50: #fff3e8;
  --color-peat-brown-100: #fbe7d7;
  --color-peat-brown-200: #ead3c0;
  --color-peat-brown-300: #d6bca7;
  --color-peat-brown-400: #b89d85;
  --color-peat-brown-500: #9e816a;
  --color-peat-brown-600: #826851;
  --color-peat-brown-700: #6a523d;
  --color-peat-brown-800: #583f29;
  --color-peat-brown-900: #433121;
  --color-peat-brown-950: #2b1e12;
  --color-emerald-oasis: #55a298;
  --color-emerald-oasis-50: #e0fffa;
  --color-emerald-oasis-100: #cefaf3;
  --color-emerald-oasis-200: #b6ebe2;
  --color-emerald-oasis-300: #9ad8ce;
  --color-emerald-oasis-400: #75bbb1;
  --color-emerald-oasis-500: #55a298;
  --color-emerald-oasis-600: #36847b;
  --color-emerald-oasis-700: #1d6a62;
  --color-emerald-oasis-800: #08534c;
  --color-emerald-oasis-900: #00403a;
  --color-emerald-oasis-950: #002723;
  --color-pale-king-s-blue: #a7f1e5;
  --color-pale-king-s-blue-50: #effffc;
  --color-pale-king-s-blue-100: #d4fcf5;
  --color-pale-king-s-blue-200: #a7f1e5;
  --color-pale-king-s-blue-300: #9bd6cc;
  --color-pale-king-s-blue-400: #72b6ab;
  --color-pale-king-s-blue-500: #51998f;
  --color-pale-king-s-blue-600: #337c73;
  --color-pale-king-s-blue-700: #1d635a;
  --color-pale-king-s-blue-800: #0b4d46;
  --color-pale-king-s-blue-900: #023c36;
  --color-pale-king-s-blue-950: #002621;
  --color-grapes-of-italy: #6e4780;
  --color-grapes-of-italy-50: #faf1ff;
  --color-grapes-of-italy-100: #f6e3ff;
  --color-grapes-of-italy-200: #ebcafb;
  --color-grapes-of-italy-300: #d7b3e9;
  --color-grapes-of-italy-400: #ba92cd;
  --color-grapes-of-italy-500: #a077b3;
  --color-grapes-of-italy-600: #855d97;
  --color-grapes-of-italy-700: #6e4780;
  --color-grapes-of-italy-800: #573665;
  --color-grapes-of-italy-900: #442850;
  --color-grapes-of-italy-950: #2b1734;
}