Young Apricot to Velvet Vortex Color Palette

About this palette

Young Apricot to Velvet Vortex is a 5-color cool palette: #FFD5B3 (Young Apricot), #4ED1C1 (Peppy Peacock), #BB8859 (Deer), #7A449F (Purple Pleasures), #4B1172 (Velvet Vortex). It mixes orange, turquoise, purple tones and feels cool overall. The strongest text pairing is #FFD5B3 on #4B1172 with a contrast ratio of 9.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Young Apricot	rgb(255, 213, 179)	hsl(27, 100%, 85%)
Peppy Peacock	rgb(78, 209, 193)	hsl(173, 59%, 56%)
Deer	rgb(187, 136, 89)	hsl(29, 42%, 54%)
Purple Pleasures	rgb(122, 68, 159)	hsl(276, 40%, 45%)
Velvet Vortex	rgb(75, 17, 114)	hsl(276, 74%, 26%)

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.51:1 Very good#FFD5B3 on #4B1172
Aa9.51:1 Very good#4B1172 on #FFD5B3
Aa6.91:1 Good#4ED1C1 on #4B1172
Aa6.91:1 Good#4B1172 on #4ED1C1
Aa4.89:1 Good#FFD5B3 on #7A449F
Aa4.89:1 Good#7A449F on #FFD5B3
Aa4.18:1 Poor#BB8859 on #4B1172
Aa4.18:1 Poor#4B1172 on #BB8859

Color blindness preview

CSS variables

/* Young Apricot to Velvet Vortex — https://swatchly.xyz/palette/ffd5b3-4ed1c1-bb8859-7a449f-4b1172 */
:root {
  --young-apricot: #ffd5b3;
  --peppy-peacock: #4ed1c1;
  --deer: #bb8859;
  --purple-pleasures: #7a449f;
  --velvet-vortex: #4b1172;
}

Tailwind CSS v4

/* Young Apricot to Velvet Vortex — https://swatchly.xyz/palette/ffd5b3-4ed1c1-bb8859-7a449f-4b1172 */
@theme {
  --color-young-apricot: #ffd5b3;
  --color-young-apricot-50: #fff8f3;
  --color-young-apricot-100: #ffeddf;
  --color-young-apricot-200: #ffd5b3;
  --color-young-apricot-300: #e1bfa3;
  --color-young-apricot-400: #c39d7f;
  --color-young-apricot-500: #a78061;
  --color-young-apricot-600: #896547;
  --color-young-apricot-700: #6f4e32;
  --color-young-apricot-800: #583b23;
  --color-young-apricot-900: #452d18;
  --color-young-apricot-950: #2c1b0c;
  --color-peppy-peacock: #4ed1c1;
  --color-peppy-peacock-50: #c4fff5;
  --color-peppy-peacock-100: #acf7eb;
  --color-peppy-peacock-200: #89e4d7;
  --color-peppy-peacock-300: #4ed1c1;
  --color-peppy-peacock-400: #2ab1a3;
  --color-peppy-peacock-500: #009688;
  --color-peppy-peacock-600: #00796e;
  --color-peppy-peacock-700: #006158;
  --color-peppy-peacock-800: #004c45;
  --color-peppy-peacock-900: #003c36;
  --color-peppy-peacock-950: #002621;
  --color-deer: #bb8859;
  --color-deer-50: #ffeddd;
  --color-deer-100: #ffddbf;
  --color-deer-200: #f0c59f;
  --color-deer-300: #daab80;
  --color-deer-400: #bb8859;
  --color-deer-500: #a16f41;
  --color-deer-600: #86582b;
  --color-deer-700: #6e441a;
  --color-deer-800: #59350e;
  --color-deer-900: #482907;
  --color-deer-950: #301902;
  --color-purple-pleasures: #7a449f;
  --color-purple-pleasures-50: #f9f2ff;
  --color-purple-pleasures-100: #f2e2ff;
  --color-purple-pleasures-200: #e4c4ff;
  --color-purple-pleasures-300: #d4a3fa;
  --color-purple-pleasures-400: #b47fdc;
  --color-purple-pleasures-500: #9761be;
  --color-purple-pleasures-600: #7a449f;
  --color-purple-pleasures-700: #623382;
  --color-purple-pleasures-800: #4e2569;
  --color-purple-pleasures-900: #3e1a54;
  --color-purple-pleasures-950: #270e38;
  --color-velvet-vortex: #4b1172;
  --color-velvet-vortex-50: #f8f2ff;
  --color-velvet-vortex-100: #f1e5ff;
  --color-velvet-vortex-200: #e4cbff;
  --color-velvet-vortex-300: #d5acff;
  --color-velvet-vortex-400: #ba88e9;
  --color-velvet-vortex-500: #9f6ccf;
  --color-velvet-vortex-600: #8452b1;
  --color-velvet-vortex-700: #6c3d95;
  --color-velvet-vortex-800: #582d7b;
  --color-velvet-vortex-900: #4b1172;
  --color-velvet-vortex-950: #2d1244;
}