Young Apricot to Pretty in Prune color palette

FFD8ADYoung Apricot 5ACA8CVegetation 009DF8Fresh Blue of Bel Air 8B437CPrunella 662457Pretty in Prune

Open in generator Export PNG, PDF, ASE…

About this palette

Young Apricot to Pretty in Prune is a 5-color warm palette: #FFD8AD (Young Apricot), #5ACA8C (Vegetation), #009DF8 (Fresh Blue of Bel Air), #8B437C (Prunella), #662457 (Pretty in Prune). It mixes orange, green, blue, pink, purple tones and feels warm overall. The strongest text pairing is #FFD8AD on #662457 with a contrast ratio of 8.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Young Apricot	rgb(255, 216, 173)	hsl(31, 100%, 84%)
Vegetation	rgb(90, 202, 140)	hsl(147, 51%, 57%)
Fresh Blue of Bel Air	rgb(0, 157, 248)	hsl(202, 100%, 49%)
Prunella	rgb(139, 67, 124)	hsl(312, 35%, 40%)
Pretty in Prune	rgb(102, 36, 87)	hsl(314, 48%, 27%)

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.

Aa8.02:1 Very good#FFD8AD on #662457
Aa8.02:1 Very good#662457 on #FFD8AD
Aa5.25:1 Good#5ACA8C on #662457
Aa5.25:1 Good#662457 on #5ACA8C
Aa4.91:1 Good#FFD8AD on #8B437C
Aa4.91:1 Good#8B437C on #FFD8AD
Aa3.67:1 Poor#009DF8 on #662457
Aa3.67:1 Poor#662457 on #009DF8

Color blindness preview

CSS variables

/* Young Apricot to Pretty in Prune — https://swatchly.xyz/palette/ffd8ad-5aca8c-009df8-8b437c-662457 */
:root {
  --young-apricot: #ffd8ad;
  --vegetation: #5aca8c;
  --fresh-blue-of-bel-air: #009df8;
  --prunella: #8b437c;
  --pretty-in-prune: #662457;
}

Tailwind CSS v4

/* Young Apricot to Pretty in Prune — https://swatchly.xyz/palette/ffd8ad-5aca8c-009df8-8b437c-662457 */
@theme {
  --color-young-apricot: #ffd8ad;
  --color-young-apricot-50: #fffaf4;
  --color-young-apricot-100: #ffefde;
  --color-young-apricot-200: #ffd8ad;
  --color-young-apricot-300: #e1c19f;
  --color-young-apricot-400: #c3a079;
  --color-young-apricot-500: #a6825a;
  --color-young-apricot-600: #896740;
  --color-young-apricot-700: #6e502b;
  --color-young-apricot-800: #573c1c;
  --color-young-apricot-900: #442e12;
  --color-young-apricot-950: #2c1b08;
  --color-vegetation: #5aca8c;
  --color-vegetation-50: #f0fff5;
  --color-vegetation-100: #d6ffe4;
  --color-vegetation-200: #aef5c9;
  --color-vegetation-300: #90e3b1;
  --color-vegetation-400: #5aca8c;
  --color-vegetation-500: #38aa6f;
  --color-vegetation-600: #008c53;
  --color-vegetation-700: #006e40;
  --color-vegetation-800: #005530;
  --color-vegetation-900: #004023;
  --color-vegetation-950: #002713;
  --color-fresh-blue-of-bel-air: #009df8;
  --color-fresh-blue-of-bel-air-50: #e6f3ff;
  --color-fresh-blue-of-bel-air-100: #d0e9ff;
  --color-fresh-blue-of-bel-air-200: #a7d5ff;
  --color-fresh-blue-of-bel-air-300: #72bfff;
  --color-fresh-blue-of-bel-air-400: #009df8;
  --color-fresh-blue-of-bel-air-500: #0083d0;
  --color-fresh-blue-of-bel-air-600: #0069a9;
  --color-fresh-blue-of-bel-air-700: #005488;
  --color-fresh-blue-of-bel-air-800: #00426d;
  --color-fresh-blue-of-bel-air-900: #003457;
  --color-fresh-blue-of-bel-air-950: #00213a;
  --color-prunella: #8b437c;
  --color-prunella-50: #fff0fb;
  --color-prunella-100: #ffdef6;
  --color-prunella-200: #fbbdeb;
  --color-prunella-300: #e7a1d6;
  --color-prunella-400: #c87db6;
  --color-prunella-500: #aa5f99;
  --color-prunella-600: #8b437c;
  --color-prunella-700: #703264;
  --color-prunella-800: #5a2450;
  --color-prunella-900: #481a3f;
  --color-prunella-950: #2f0e28;
  --color-pretty-in-prune: #662457;
  --color-pretty-in-prune-50: #fff0fa;
  --color-pretty-in-prune-100: #ffe1f5;
  --color-pretty-in-prune-200: #fdc2ec;
  --color-pretty-in-prune-300: #eba8d7;
  --color-pretty-in-prune-400: #ce86ba;
  --color-pretty-in-prune-500: #b2699e;
  --color-pretty-in-prune-600: #944f82;
  --color-pretty-in-prune-700: #793b69;
  --color-pretty-in-prune-800: #662457;
  --color-pretty-in-prune-900: #4c1f41;
  --color-pretty-in-prune-950: #32112a;
}