Prosecco to Pink Orchid Color Palette

About this palette

Prosecco to Pink Orchid is a 5-color cool palette: #FFD6A2 (Prosecco), #6F196E (Purple), #006F7B (Teal With It), #AE8200 (Arrowwood), #E470E2 (Pink Orchid). It mixes orange, purple, turquoise, yellow, pink tones and feels cool overall. The strongest text pairing is #FFD6A2 on #6F196E with a contrast ratio of 7.54:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prosecco	rgb(255, 214, 162)	hsl(34, 100%, 82%)
Purple	rgb(111, 25, 110)	hsl(301, 63%, 27%)
Teal With It	rgb(0, 111, 123)	hsl(186, 100%, 24%)
Arrowwood	rgb(174, 130, 0)	hsl(45, 100%, 34%)
Pink Orchid	rgb(228, 112, 226)	hsl(301, 68%, 67%)

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.54:1 Very good#FFD6A2 on #6F196E
Aa7.54:1 Very good#6F196E on #FFD6A2
Aa4.32:1 Poor#FFD6A2 on #006F7B
Aa4.32:1 Poor#006F7B on #FFD6A2
Aa3.78:1 Poor#6F196E on #E470E2
Aa3.78:1 Poor#E470E2 on #6F196E

Color blindness preview

CSS variables

/* Prosecco to Pink Orchid — https://swatchly.xyz/palette/ffd6a2-6f196e-006f7b-ae8200-e470e2 */
:root {
  --prosecco: #ffd6a2;
  --purple: #6f196e;
  --teal-with-it: #006f7b;
  --arrowwood: #ae8200;
  --pink-orchid: #e470e2;
}

Tailwind CSS v4

/* Prosecco to Pink Orchid — https://swatchly.xyz/palette/ffd6a2-6f196e-006f7b-ae8200-e470e2 */
@theme {
  --color-prosecco: #ffd6a2;
  --color-prosecco-50: #fff8f0;
  --color-prosecco-100: #ffedd8;
  --color-prosecco-200: #ffd6a2;
  --color-prosecco-300: #e1c096;
  --color-prosecco-400: #c39e6f;
  --color-prosecco-500: #a78150;
  --color-prosecco-600: #8a6635;
  --color-prosecco-700: #6f4f21;
  --color-prosecco-800: #583c13;
  --color-prosecco-900: #452d09;
  --color-prosecco-950: #2c1b03;
  --color-purple: #6f196e;
  --color-purple-50: #fff0fe;
  --color-purple-100: #ffe0fc;
  --color-purple-200: #ffbefb;
  --color-purple-300: #f0a2ec;
  --color-purple-400: #d47fd1;
  --color-purple-500: #b962b6;
  --color-purple-600: #9c489a;
  --color-purple-700: #823380;
  --color-purple-800: #6f196e;
  --color-purple-900: #541853;
  --color-purple-950: #370b37;
  --color-teal-with-it: #006f7b;
  --color-teal-with-it-50: #e0fbff;
  --color-teal-with-it-100: #c0f4fc;
  --color-teal-with-it-200: #a1e0ea;
  --color-teal-with-it-300: #80c9d4;
  --color-teal-with-it-400: #55a9b5;
  --color-teal-with-it-500: #328c98;
  --color-teal-with-it-600: #006f7b;
  --color-teal-with-it-700: #005862;
  --color-teal-with-it-800: #00454d;
  --color-teal-with-it-900: #00363c;
  --color-teal-with-it-950: #002226;
  --color-arrowwood: #ae8200;
  --color-arrowwood-50: #fff5e0;
  --color-arrowwood-100: #ffeac0;
  --color-arrowwood-200: #f7d590;
  --color-arrowwood-300: #e4be6d;
  --color-arrowwood-400: #c89e3c;
  --color-arrowwood-500: #ae8200;
  --color-arrowwood-600: #8c6800;
  --color-arrowwood-700: #705200;
  --color-arrowwood-800: #584000;
  --color-arrowwood-900: #443000;
  --color-arrowwood-950: #2b1d00;
  --color-pink-orchid: #e470e2;
  --color-pink-orchid-50: #fff1fe;
  --color-pink-orchid-100: #ffe2fd;
  --color-pink-orchid-200: #ffc2fc;
  --color-pink-orchid-300: #fd9afa;
  --color-pink-orchid-400: #e470e2;
  --color-pink-orchid-500: #c553c3;
  --color-pink-orchid-600: #a635a5;
  --color-pink-orchid-700: #891e89;
  --color-pink-orchid-800: #6e0b6f;
  --color-pink-orchid-900: #570158;
  --color-pink-orchid-950: #380039;
}