Decadial Pink to Cypress Color Palette

About this palette

Decadial Pink to Cypress is a 5-color muted, cool, earthy palette: #DBCAE0 (Decadial Pink), #718547 (Grasshopper), #BDABC5 (Monet Magic), #2E3D1F (Myrtle), #526246 (Cypress). It mixes purple, green tones and feels cool overall. The strongest text pairing is #DBCAE0 on #2E3D1F with a contrast ratio of 7.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Decadial Pink	rgb(219, 202, 224)	hsl(286, 26%, 84%)
Grasshopper	rgb(113, 133, 71)	hsl(79, 30%, 40%)
Monet Magic	rgb(189, 171, 197)	hsl(282, 18%, 72%)
Myrtle	rgb(46, 61, 31)	hsl(90, 33%, 18%)
Cypress	rgb(82, 98, 70)	hsl(94, 17%, 33%)

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.

Aa7.51:1 Very good#DBCAE0 on #2E3D1F
Aa7.51:1 Very good#2E3D1F on #DBCAE0
Aa5.43:1 Good#BDABC5 on #2E3D1F
Aa5.43:1 Good#2E3D1F on #BDABC5
Aa4.24:1 Poor#DBCAE0 on #526246
Aa4.24:1 Poor#526246 on #DBCAE0
Aa3.07:1 Poor#BDABC5 on #526246
Aa3.07:1 Poor#526246 on #BDABC5

Color blindness preview

CSS variables

/* Decadial Pink to Cypress — https://swatchly.xyz/palette/dbcae0-718547-bdabc5-2e3d1f-526246 */
:root {
  --decadial-pink: #dbcae0;
  --grasshopper: #718547;
  --monet-magic: #bdabc5;
  --myrtle: #2e3d1f;
  --cypress: #526246;
}

Tailwind CSS v4

/* Decadial Pink to Cypress — https://swatchly.xyz/palette/dbcae0-718547-bdabc5-2e3d1f-526246 */
@theme {
  --color-decadial-pink: #dbcae0;
  --color-decadial-pink-50: #f7edfa;
  --color-decadial-pink-100: #ece1f0;
  --color-decadial-pink-200: #dbcae0;
  --color-decadial-pink-300: #c4b6c8;
  --color-decadial-pink-400: #a797ab;
  --color-decadial-pink-500: #8c7d91;
  --color-decadial-pink-600: #736477;
  --color-decadial-pink-700: #5c4f60;
  --color-decadial-pink-800: #493e4d;
  --color-decadial-pink-900: #392f3b;
  --color-decadial-pink-950: #231c25;
  --color-grasshopper: #718547;
  --color-grasshopper-50: #ecfad5;
  --color-grasshopper-100: #dfefc4;
  --color-grasshopper-200: #c8daa8;
  --color-grasshopper-300: #afc38a;
  --color-grasshopper-400: #8da265;
  --color-grasshopper-500: #718547;
  --color-grasshopper-600: #596c31;
  --color-grasshopper-700: #465620;
  --color-grasshopper-800: #364414;
  --color-grasshopper-900: #29350b;
  --color-grasshopper-950: #192204;
  --color-monet-magic: #bdabc5;
  --color-monet-magic-50: #f4e9f9;
  --color-monet-magic-100: #e9dcee;
  --color-monet-magic-200: #d4c5db;
  --color-monet-magic-300: #bdabc5;
  --color-monet-magic-400: #a08fa7;
  --color-monet-magic-500: #87768e;
  --color-monet-magic-600: #6e5f75;
  --color-monet-magic-700: #594b60;
  --color-monet-magic-800: #483b4d;
  --color-monet-magic-900: #392e3e;
  --color-monet-magic-950: #241c27;
  --color-myrtle: #2e3d1f;
  --color-myrtle-50: #effae5;
  --color-myrtle-100: #e4f0d9;
  --color-myrtle-200: #cfddc2;
  --color-myrtle-300: #b7c7a9;
  --color-myrtle-400: #98a988;
  --color-myrtle-500: #7d8f6d;
  --color-myrtle-600: #647555;
  --color-myrtle-700: #4f5e41;
  --color-myrtle-800: #3e4c31;
  --color-myrtle-900: #2e3d1f;
  --color-myrtle-950: #1e2615;
  --color-cypress: #526246;
  --color-cypress-50: #eff9e7;
  --color-cypress-100: #e4f0dc;
  --color-cypress-200: #d0dec7;
  --color-cypress-300: #bac9af;
  --color-cypress-400: #9bac8f;
  --color-cypress-500: #809274;
  --color-cypress-600: #67785b;
  --color-cypress-700: #526246;
  --color-cypress-800: #3f4d35;
  --color-cypress-900: #303b27;
  --color-cypress-950: #1d2517;
}