April Showers to Eclipse Elixir color palette

D3DCB8April Showers 659DAATranquili Teal 875C5BReading Tea Leaves 006064Beau Vert 231E2DEclipse Elixir

Open in generator Export PNG, PDF, ASE…

About this palette

April Showers to Eclipse Elixir is a 5-color muted, cool palette: #D3DCB8 (April Showers), #659DAA (Tranquili Teal), #875C5B (Reading Tea Leaves), #006064 (Beau Vert), #231E2D (Eclipse Elixir). It mixes green, turquoise, red, gray tones and feels cool overall. The strongest text pairing is #D3DCB8 on #231E2D with a contrast ratio of 11.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
April Showers	rgb(211, 220, 184)	hsl(75, 34%, 79%)
Tranquili Teal	rgb(101, 157, 170)	hsl(191, 29%, 53%)
Reading Tea Leaves	rgb(135, 92, 91)	hsl(1, 19%, 44%)
Beau Vert	rgb(0, 96, 100)	hsl(182, 100%, 20%)
Eclipse Elixir	rgb(35, 30, 45)	hsl(260, 20%, 15%)

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.35:1 Very good#D3DCB8 on #231E2D
Aa11.35:1 Very good#231E2D on #D3DCB8
Aa5.37:1 Good#659DAA on #231E2D
Aa5.37:1 Good#231E2D on #659DAA
Aa5.14:1 Good#D3DCB8 on #006064
Aa5.14:1 Good#006064 on #D3DCB8
Aa3.96:1 Poor#D3DCB8 on #875C5B
Aa3.96:1 Poor#875C5B on #D3DCB8

Color blindness preview

CSS variables

/* April Showers to Eclipse Elixir — https://swatchly.xyz/palette/d3dcb8-659daa-875c5b-006064-231e2d */
:root {
  --april-showers: #d3dcb8;
  --tranquili-teal: #659daa;
  --reading-tea-leaves: #875c5b;
  --beau-vert: #006064;
  --eclipse-elixir: #231e2d;
}

Tailwind CSS v4

/* April Showers to Eclipse Elixir — https://swatchly.xyz/palette/d3dcb8-659daa-875c5b-006064-231e2d */
@theme {
  --color-april-showers: #d3dcb8;
  --color-april-showers-50: #f2f8e4;
  --color-april-showers-100: #e8eed7;
  --color-april-showers-200: #d3dcb8;
  --color-april-showers-300: #bdc5a7;
  --color-april-showers-400: #9ea685;
  --color-april-showers-500: #828a69;
  --color-april-showers-600: #687050;
  --color-april-showers-700: #52593c;
  --color-april-showers-800: #40462c;
  --color-april-showers-900: #313620;
  --color-april-showers-950: #1e2112;
  --color-tranquili-teal: #659daa;
  --color-tranquili-teal-50: #eafbff;
  --color-tranquili-teal-100: #d5f7ff;
  --color-tranquili-teal-200: #bfe6f0;
  --color-tranquili-teal-300: #a5d3de;
  --color-tranquili-teal-400: #82b6c3;
  --color-tranquili-teal-500: #659daa;
  --color-tranquili-teal-600: #48808c;
  --color-tranquili-teal-700: #316671;
  --color-tranquili-teal-800: #204f5a;
  --color-tranquili-teal-900: #133d45;
  --color-tranquili-teal-950: #08252b;
  --color-reading-tea-leaves: #875c5b;
  --color-reading-tea-leaves-50: #fff1f1;
  --color-reading-tea-leaves-100: #ffe3e2;
  --color-reading-tea-leaves-200: #f1cccb;
  --color-reading-tea-leaves-300: #deb4b2;
  --color-reading-tea-leaves-400: #c09291;
  --color-reading-tea-leaves-500: #a37675;
  --color-reading-tea-leaves-600: #875c5b;
  --color-reading-tea-leaves-700: #6d4747;
  --color-reading-tea-leaves-800: #573636;
  --color-reading-tea-leaves-900: #452929;
  --color-reading-tea-leaves-950: #2c1818;
  --color-beau-vert: #006064;
  --color-beau-vert-50: #d9fdff;
  --color-beau-vert-100: #c8f5f7;
  --color-beau-vert-200: #ace3e6;
  --color-beau-vert-300: #8eced1;
  --color-beau-vert-400: #66afb2;
  --color-beau-vert-500: #479397;
  --color-beau-vert-600: #2a777b;
  --color-beau-vert-700: #006064;
  --color-beau-vert-800: #024b4e;
  --color-beau-vert-900: #003a3d;
  --color-beau-vert-950: #002426;
  --color-eclipse-elixir: #231e2d;
  --color-eclipse-elixir-50: #f6f3ff;
  --color-eclipse-elixir-100: #ede9f6;
  --color-eclipse-elixir-200: #d9d5e4;
  --color-eclipse-elixir-300: #c3becf;
  --color-eclipse-elixir-400: #a49eb1;
  --color-eclipse-elixir-500: #898396;
  --color-eclipse-elixir-600: #6f697b;
  --color-eclipse-elixir-700: #585363;
  --color-eclipse-elixir-800: #45414f;
  --color-eclipse-elixir-900: #36323e;
  --color-eclipse-elixir-950: #231e2d;
}