Cotton Boll to Queen of Trees color palette

E5EAFFCotton Boll A2ACE1Wondrous Wisteria B37D7BNipple 8E6A68Chocolate Temptation 3E673CJurassic Park 223F1FQueen of Trees

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Queen of Trees is a 6-color palette: #E5EAFF (Cotton Boll), #A2ACE1 (Wondrous Wisteria), #B37D7B (Nipple), #8E6A68 (Chocolate Temptation), #3E673C (Jurassic Park), #223F1F (Queen of Trees). It mixes white, purple, red, green tones and feels cool overall. The strongest text pairing is #E5EAFF on #223F1F with a contrast ratio of 9.75:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(229, 234, 255)	hsl(228, 100%, 95%)
Wondrous Wisteria	rgb(162, 172, 225)	hsl(230, 51%, 76%)
Nipple	rgb(179, 125, 123)	hsl(2, 27%, 59%)
Chocolate Temptation	rgb(142, 106, 104)	hsl(3, 15%, 48%)
Jurassic Park	rgb(62, 103, 60)	hsl(117, 26%, 32%)
Queen of Trees	rgb(34, 63, 31)	hsl(114, 34%, 18%)

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.

Aa9.75:1 Very good#E5EAFF on #223F1F
Aa9.75:1 Very good#223F1F on #E5EAFF
Aa5.47:1 Good#E5EAFF on #3E673C
Aa5.47:1 Good#3E673C on #E5EAFF
Aa5.29:1 Good#A2ACE1 on #223F1F
Aa5.29:1 Good#223F1F on #A2ACE1
Aa3.98:1 Poor#E5EAFF on #8E6A68
Aa3.98:1 Poor#8E6A68 on #E5EAFF

Color blindness preview

CSS variables

/* Cotton Boll to Queen of Trees — https://swatchly.xyz/palette/e5eaff-a2ace1-b37d7b-8e6a68-3e673c-223f1f */
:root {
  --cotton-boll: #e5eaff;
  --wondrous-wisteria: #a2ace1;
  --nipple: #b37d7b;
  --chocolate-temptation: #8e6a68;
  --jurassic-park: #3e673c;
  --queen-of-trees: #223f1f;
}

Tailwind CSS v4

/* Cotton Boll to Queen of Trees — https://swatchly.xyz/palette/e5eaff-a2ace1-b37d7b-8e6a68-3e673c-223f1f */
@theme {
  --color-cotton-boll: #e5eaff;
  --color-cotton-boll-50: #f2f4ff;
  --color-cotton-boll-100: #e5eaff;
  --color-cotton-boll-200: #d3d7e6;
  --color-cotton-boll-300: #bcc0d1;
  --color-cotton-boll-400: #9ca0b3;
  --color-cotton-boll-500: #818598;
  --color-cotton-boll-600: #676b7d;
  --color-cotton-boll-700: #515464;
  --color-cotton-boll-800: #3e4250;
  --color-cotton-boll-900: #2f323e;
  --color-cotton-boll-950: #1d1f27;
  --color-wondrous-wisteria: #a2ace1;
  --color-wondrous-wisteria-50: #f9faff;
  --color-wondrous-wisteria-100: #eff2ff;
  --color-wondrous-wisteria-200: #d9e0ff;
  --color-wondrous-wisteria-300: #c2caf6;
  --color-wondrous-wisteria-400: #a2ace1;
  --color-wondrous-wisteria-500: #858ec0;
  --color-wondrous-wisteria-600: #6871a2;
  --color-wondrous-wisteria-700: #505885;
  --color-wondrous-wisteria-800: #3d436a;
  --color-wondrous-wisteria-900: #2d3252;
  --color-wondrous-wisteria-950: #1a1d34;
  --color-nipple: #b37d7b;
  --color-nipple-50: #fff3f3;
  --color-nipple-100: #ffe7e6;
  --color-nipple-200: #facfcd;
  --color-nipple-300: #e9b8b6;
  --color-nipple-400: #cd9896;
  --color-nipple-500: #b37d7b;
  --color-nipple-600: #956260;
  --color-nipple-700: #794b4a;
  --color-nipple-800: #613938;
  --color-nipple-900: #4c2a29;
  --color-nipple-950: #311818;
  --color-chocolate-temptation: #8e6a68;
  --color-chocolate-temptation-50: #fff2f1;
  --color-chocolate-temptation-100: #ffe6e4;
  --color-chocolate-temptation-200: #f0d3d1;
  --color-chocolate-temptation-300: #debcba;
  --color-chocolate-temptation-400: #c29d9b;
  --color-chocolate-temptation-500: #a88381;
  --color-chocolate-temptation-600: #8e6a68;
  --color-chocolate-temptation-700: #735351;
  --color-chocolate-temptation-800: #5c3f3e;
  --color-chocolate-temptation-900: #482f2e;
  --color-chocolate-temptation-950: #2e1c1c;
  --color-jurassic-park: #3e673c;
  --color-jurassic-park-50: #e4fee2;
  --color-jurassic-park-100: #d8f5d6;
  --color-jurassic-park-200: #c2e4c0;
  --color-jurassic-park-300: #a9cfa7;
  --color-jurassic-park-400: #88b285;
  --color-jurassic-park-500: #6d976a;
  --color-jurassic-park-600: #547d51;
  --color-jurassic-park-700: #3e673c;
  --color-jurassic-park-800: #2f512d;
  --color-jurassic-park-900: #223f20;
  --color-jurassic-park-950: #122812;
  --color-queen-of-trees: #223f1f;
  --color-queen-of-trees-50: #e8fce6;
  --color-queen-of-trees-100: #ddf2da;
  --color-queen-of-trees-200: #c6e0c3;
  --color-queen-of-trees-300: #adcaaa;
  --color-queen-of-trees-400: #8dad89;
  --color-queen-of-trees-500: #72926e;
  --color-queen-of-trees-600: #597855;
  --color-queen-of-trees-700: #456141;
  --color-queen-of-trees-800: #344d31;
  --color-queen-of-trees-900: #223f1f;
  --color-queen-of-trees-950: #172715;
}