Young Apricot to Elite Teal Color Palette

About this palette

Young Apricot to Elite Teal is a 5-color cool palette: #FFD3AD (Young Apricot), #D793FD (Dream Vapour), #00A699 (Silken Jade), #885100 (Grizzly), #003131 (Elite Teal). It mixes orange, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #FFD3AD on #003131 with a contrast ratio of 10.23:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Young Apricot	rgb(255, 211, 173)	hsl(28, 100%, 84%)
Dream Vapour	rgb(215, 147, 253)	hsl(278, 96%, 78%)
Silken Jade	rgb(0, 166, 153)	hsl(175, 100%, 33%)
Grizzly	rgb(136, 81, 0)	hsl(36, 100%, 27%)
Elite Teal	rgb(0, 49, 49)	hsl(180, 100%, 10%)

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.

Aa10.23:1 Very good#FFD3AD on #003131
Aa10.23:1 Very good#003131 on #FFD3AD
Aa6.39:1 Good#D793FD on #003131
Aa6.39:1 Good#003131 on #D793FD
Aa4.71:1 Good#FFD3AD on #885100
Aa4.71:1 Good#885100 on #FFD3AD
Aa4.66:1 Good#00A699 on #003131
Aa4.66:1 Good#003131 on #00A699

Color blindness preview

CSS variables

/* Young Apricot to Elite Teal — https://swatchly.xyz/palette/ffd3ad-d793fd-00a699-885100-003131 */
:root {
  --young-apricot: #ffd3ad;
  --dream-vapour: #d793fd;
  --silken-jade: #00a699;
  --grizzly: #885100;
  --elite-teal: #003131;
}

Tailwind CSS v4

/* Young Apricot to Elite Teal — https://swatchly.xyz/palette/ffd3ad-d793fd-00a699-885100-003131 */
@theme {
  --color-young-apricot: #ffd3ad;
  --color-young-apricot-50: #fff7f0;
  --color-young-apricot-100: #ffecdb;
  --color-young-apricot-200: #ffd3ad;
  --color-young-apricot-300: #e1bd9e;
  --color-young-apricot-400: #c39c79;
  --color-young-apricot-500: #a77f5c;
  --color-young-apricot-600: #8a6442;
  --color-young-apricot-700: #704e2e;
  --color-young-apricot-800: #593b1f;
  --color-young-apricot-900: #462c15;
  --color-young-apricot-950: #2d1b09;
  --color-dream-vapour: #d793fd;
  --color-dream-vapour-50: #f6e8ff;
  --color-dream-vapour-100: #f0d8ff;
  --color-dream-vapour-200: #e5b8ff;
  --color-dream-vapour-300: #d793fd;
  --color-dream-vapour-400: #b877dc;
  --color-dream-vapour-500: #9f5cc2;
  --color-dream-vapour-600: #8445a5;
  --color-dream-vapour-700: #6d328a;
  --color-dream-vapour-800: #582472;
  --color-dream-vapour-900: #47195d;
  --color-dream-vapour-950: #2e0c3e;
  --color-silken-jade: #00a699;
  --color-silken-jade-50: #defffa;
  --color-silken-jade-100: #bbfef5;
  --color-silken-jade-200: #9defe4;
  --color-silken-jade-300: #7adcd0;
  --color-silken-jade-400: #48c0b3;
  --color-silken-jade-500: #00a699;
  --color-silken-jade-600: #00867b;
  --color-silken-jade-700: #006a61;
  --color-silken-jade-800: #00534c;
  --color-silken-jade-900: #003f39;
  --color-silken-jade-950: #002723;
  --color-grizzly: #885100;
  --color-grizzly-50: #fff3e7;
  --color-grizzly-100: #ffe6cf;
  --color-grizzly-200: #fed0a2;
  --color-grizzly-300: #edba85;
  --color-grizzly-400: #d39a5f;
  --color-grizzly-500: #ba8040;
  --color-grizzly-600: #9f6724;
  --color-grizzly-700: #885100;
  --color-grizzly-800: #6b3f00;
  --color-grizzly-900: #533000;
  --color-grizzly-950: #361d00;
  --color-elite-teal: #003131;
  --color-elite-teal-50: #e2fbfa;
  --color-elite-teal-100: #d5f2f1;
  --color-elite-teal-200: #bddfdf;
  --color-elite-teal-300: #a3cac9;
  --color-elite-teal-400: #7ea9a8;
  --color-elite-teal-500: #608c8b;
  --color-elite-teal-600: #456f6f;
  --color-elite-teal-700: #305656;
  --color-elite-teal-800: #204140;
  --color-elite-teal-900: #003131;
  --color-elite-teal-950: #0a1c1c;
}