Dark Eclipse to Young Apricot color palette

14233EDark Eclipse 54386FPurple Protégé 8A6531Aged Antics 93A670Green Tea Mochi FADAB5Young Apricot

About this palette

Dark Eclipse to Young Apricot is a 5-color cool, earthy, vintage palette: #14233E (Dark Eclipse), #54386F (Purple Protégé), #8A6531 (Aged Antics), #93A670 (Green Tea Mochi), #FADAB5 (Young Apricot). It mixes blue, purple, brown, green, orange tones and feels cool overall. The strongest text pairing is #14233E on #FADAB5 with a contrast ratio of 11.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Eclipse	rgb(20, 35, 62)	hsl(219, 51%, 16%)
Purple Protégé	rgb(84, 56, 111)	hsl(271, 33%, 33%)
Aged Antics	rgb(138, 101, 49)	hsl(35, 48%, 37%)
Green Tea Mochi	rgb(147, 166, 112)	hsl(81, 23%, 55%)
Young Apricot	rgb(250, 218, 181)	hsl(32, 87%, 85%)

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.

Aa11.76:1 Very good#14233E on #FADAB5
Aa11.76:1 Very good#FADAB5 on #14233E
Aa7.26:1 Very good#54386F on #FADAB5
Aa7.26:1 Very good#FADAB5 on #54386F
Aa5.92:1 Good#14233E on #93A670
Aa5.92:1 Good#93A670 on #14233E
Aa3.95:1 Poor#8A6531 on #FADAB5
Aa3.95:1 Poor#FADAB5 on #8A6531

Color blindness preview

CSS variables

/* Dark Eclipse to Young Apricot — https://swatchly.xyz/palette/14233e-54386f-8a6531-93a670-fadab5 */
:root {
  --dark-eclipse: #14233e;
  --purple-prot-g: #54386f;
  --aged-antics: #8a6531;
  --green-tea-mochi: #93a670;
  --young-apricot: #fadab5;
}

Tailwind CSS v4

/* Dark Eclipse to Young Apricot — https://swatchly.xyz/palette/14233e-54386f-8a6531-93a670-fadab5 */
@theme {
  --color-dark-eclipse: #14233e;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e1ecff;
  --color-dark-eclipse-200: #c9d8f3;
  --color-dark-eclipse-300: #b0c2e0;
  --color-dark-eclipse-400: #8fa2c3;
  --color-dark-eclipse-500: #7588a9;
  --color-dark-eclipse-600: #5c6e8e;
  --color-dark-eclipse-700: #485875;
  --color-dark-eclipse-800: #37465f;
  --color-dark-eclipse-900: #2a374d;
  --color-dark-eclipse-950: #14233e;
  --color-purple-prot-g: #54386f;
  --color-purple-prot-g-50: #f8f2ff;
  --color-purple-prot-g-100: #f1e5ff;
  --color-purple-prot-g-200: #e3ccfd;
  --color-purple-prot-g-300: #cfb5ec;
  --color-purple-prot-g-400: #b195d0;
  --color-purple-prot-g-500: #977ab6;
  --color-purple-prot-g-600: #7d609a;
  --color-purple-prot-g-700: #664c81;
  --color-purple-prot-g-800: #54386f;
  --color-purple-prot-g-900: #402c54;
  --color-purple-prot-g-950: #291a37;
  --color-aged-antics: #8a6531;
  --color-aged-antics-50: #fff3e4;
  --color-aged-antics-100: #ffe7ca;
  --color-aged-antics-200: #f1d2ab;
  --color-aged-antics-300: #debb8e;
  --color-aged-antics-400: #c19b69;
  --color-aged-antics-500: #a67f4c;
  --color-aged-antics-600: #8a6531;
  --color-aged-antics-700: #704f1f;
  --color-aged-antics-800: #593d10;
  --color-aged-antics-900: #462e07;
  --color-aged-antics-950: #2d1b02;
  --color-green-tea-mochi: #93a670;
  --color-green-tea-mochi-50: #edf9da;
  --color-green-tea-mochi-100: #e2efcb;
  --color-green-tea-mochi-200: #ccdcb2;
  --color-green-tea-mochi-300: #b4c596;
  --color-green-tea-mochi-400: #93a670;
  --color-green-tea-mochi-500: #798b56;
  --color-green-tea-mochi-600: #60713e;
  --color-green-tea-mochi-700: #4b5a2c;
  --color-green-tea-mochi-800: #3a471e;
  --color-green-tea-mochi-900: #2c3714;
  --color-green-tea-mochi-950: #1b2309;
  --color-young-apricot: #fadab5;
  --color-young-apricot-50: #fffaf4;
  --color-young-apricot-100: #fff0de;
  --color-young-apricot-200: #fadab5;
  --color-young-apricot-300: #ddc3a5;
  --color-young-apricot-400: #bea180;
  --color-young-apricot-500: #a18462;
  --color-young-apricot-600: #846947;
  --color-young-apricot-700: #6a5133;
  --color-young-apricot-800: #533e23;
  --color-young-apricot-900: #412f18;
  --color-young-apricot-950: #2a1c0c;
}