Grape Kiss to Natural Orchestra color palette

834C6EGrape Kiss C7B086Toupe 113E34Botanical Night CFE1FFPuffy Cloud 479F7ANatural Orchestra

About this palette

Grape Kiss to Natural Orchestra is a 5-color cool, vintage palette: #834C6E (Grape Kiss), #C7B086 (Toupe), #113E34 (Botanical Night), #CFE1FF (Puffy Cloud), #479F7A (Natural Orchestra). It mixes red, yellow, turquoise, blue, green tones and feels cool overall. The strongest text pairing is #113E34 on #CFE1FF with a contrast ratio of 9.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Kiss	rgb(131, 76, 110)	hsl(323, 27%, 41%)
Toupe	rgb(199, 176, 134)	hsl(39, 37%, 65%)
Botanical Night	rgb(17, 62, 52)	hsl(167, 57%, 15%)
Puffy Cloud	rgb(207, 225, 255)	hsl(218, 100%, 91%)
Natural Orchestra	rgb(71, 159, 122)	hsl(155, 38%, 45%)

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.00:1 Very good#113E34 on #CFE1FF
Aa9.00:1 Very good#CFE1FF on #113E34
Aa5.66:1 Good#C7B086 on #113E34
Aa5.66:1 Good#113E34 on #C7B086
Aa4.92:1 Good#834C6E on #CFE1FF
Aa4.92:1 Good#CFE1FF on #834C6E
Aa3.69:1 Poor#113E34 on #479F7A
Aa3.69:1 Poor#479F7A on #113E34

Color blindness preview

CSS variables

/* Grape Kiss to Natural Orchestra — https://swatchly.xyz/palette/834c6e-c7b086-113e34-cfe1ff-479f7a */
:root {
  --grape-kiss: #834c6e;
  --toupe: #c7b086;
  --botanical-night: #113e34;
  --puffy-cloud: #cfe1ff;
  --natural-orchestra: #479f7a;
}

Tailwind CSS v4

/* Grape Kiss to Natural Orchestra — https://swatchly.xyz/palette/834c6e-c7b086-113e34-cfe1ff-479f7a */
@theme {
  --color-grape-kiss: #834c6e;
  --color-grape-kiss-50: #fff0f8;
  --color-grape-kiss-100: #ffdef1;
  --color-grape-kiss-200: #f4c3df;
  --color-grape-kiss-300: #dfa8c8;
  --color-grape-kiss-400: #bf85a8;
  --color-grape-kiss-500: #a1688a;
  --color-grape-kiss-600: #834c6e;
  --color-grape-kiss-700: #6a3a58;
  --color-grape-kiss-800: #542c45;
  --color-grape-kiss-900: #432136;
  --color-grape-kiss-950: #2b1322;
  --color-toupe: #c7b086;
  --color-toupe-50: #fbecd2;
  --color-toupe-100: #f0e0c3;
  --color-toupe-200: #dcc9a7;
  --color-toupe-300: #c7b086;
  --color-toupe-400: #a9936b;
  --color-toupe-500: #907a52;
  --color-toupe-600: #77623c;
  --color-toupe-700: #614e2b;
  --color-toupe-800: #4e3e1f;
  --color-toupe-900: #3e3015;
  --color-toupe-950: #281e0a;
  --color-botanical-night: #113e34;
  --color-botanical-night-50: #e2fcf4;
  --color-botanical-night-100: #d6f3ea;
  --color-botanical-night-200: #bee0d6;
  --color-botanical-night-300: #a4cbbf;
  --color-botanical-night-400: #82ada0;
  --color-botanical-night-500: #669286;
  --color-botanical-night-600: #4c776c;
  --color-botanical-night-700: #396056;
  --color-botanical-night-800: #294c43;
  --color-botanical-night-900: #113e34;
  --color-botanical-night-950: #102620;
  --color-puffy-cloud: #cfe1ff;
  --color-puffy-cloud-50: #f8fbff;
  --color-puffy-cloud-100: #ebf3ff;
  --color-puffy-cloud-200: #cfe1ff;
  --color-puffy-cloud-300: #bac9e1;
  --color-puffy-cloud-400: #98a8c3;
  --color-puffy-cloud-500: #7b8ba6;
  --color-puffy-cloud-600: #5f6f89;
  --color-puffy-cloud-700: #49576e;
  --color-puffy-cloud-800: #374357;
  --color-puffy-cloud-900: #293344;
  --color-puffy-cloud-950: #181f2c;
  --color-natural-orchestra: #479f7a;
  --color-natural-orchestra-50: #dfffef;
  --color-natural-orchestra-100: #c8fbe2;
  --color-natural-orchestra-200: #aeeacd;
  --color-natural-orchestra-300: #90d7b5;
  --color-natural-orchestra-400: #68ba95;
  --color-natural-orchestra-500: #479f7a;
  --color-natural-orchestra-600: #27825f;
  --color-natural-orchestra-700: #0a6949;
  --color-natural-orchestra-800: #005238;
  --color-natural-orchestra-900: #003f2a;
  --color-natural-orchestra-950: #002819;
}