Amorous to Cotton Boll color palette

8E7E93Amorous 475E7CNight Market BCCDA0Seedling 2F3317Wasabi Nori E6EFFFCotton Boll

About this palette

Amorous to Cotton Boll is a 5-color muted, cool palette: #8E7E93 (Amorous), #475E7C (Night Market), #BCCDA0 (Seedling), #2F3317 (Wasabi Nori), #E6EFFF (Cotton Boll). It mixes purple, blue, green, white tones and feels cool overall. The strongest text pairing is #2F3317 on #E6EFFF with a contrast ratio of 11.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Amorous	rgb(142, 126, 147)	hsl(286, 9%, 54%)
Night Market	rgb(71, 94, 124)	hsl(214, 27%, 38%)
Seedling	rgb(188, 205, 160)	hsl(83, 31%, 72%)
Wasabi Nori	rgb(47, 51, 23)	hsl(69, 38%, 15%)
Cotton Boll	rgb(230, 239, 255)	hsl(218, 100%, 95%)

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.30:1 Very good#2F3317 on #E6EFFF
Aa11.30:1 Very good#E6EFFF on #2F3317
Aa7.70:1 Very good#BCCDA0 on #2F3317
Aa7.70:1 Very good#2F3317 on #BCCDA0
Aa5.75:1 Good#475E7C on #E6EFFF
Aa5.75:1 Good#E6EFFF on #475E7C
Aa3.92:1 Poor#475E7C on #BCCDA0
Aa3.92:1 Poor#BCCDA0 on #475E7C

Color blindness preview

CSS variables

/* Amorous to Cotton Boll — https://swatchly.xyz/palette/8e7e93-475e7c-bccda0-2f3317-e6efff */
:root {
  --amorous: #8e7e93;
  --night-market: #475e7c;
  --seedling: #bccda0;
  --wasabi-nori: #2f3317;
  --cotton-boll: #e6efff;
}

Tailwind CSS v4

/* Amorous to Cotton Boll — https://swatchly.xyz/palette/8e7e93-475e7c-bccda0-2f3317-e6efff */
@theme {
  --color-amorous: #8e7e93;
  --color-amorous-50: #fbf1fe;
  --color-amorous-100: #f1e6f5;
  --color-amorous-200: #ded1e2;
  --color-amorous-300: #c8bacd;
  --color-amorous-400: #aa9aaf;
  --color-amorous-500: #8e7e93;
  --color-amorous-600: #736478;
  --color-amorous-700: #5c4f61;
  --color-amorous-800: #493d4c;
  --color-amorous-900: #382e3b;
  --color-amorous-950: #231c25;
  --color-night-market: #475e7c;
  --color-night-market-50: #eff6ff;
  --color-night-market-100: #dfedff;
  --color-night-market-200: #c7dbf4;
  --color-night-market-300: #b0c6e3;
  --color-night-market-400: #90a8c7;
  --color-night-market-500: #758dad;
  --color-night-market-600: #5c7493;
  --color-night-market-700: #475e7c;
  --color-night-market-800: #364962;
  --color-night-market-900: #28384d;
  --color-night-market-950: #172332;
  --color-seedling: #bccda0;
  --color-seedling-50: #f2fce3;
  --color-seedling-100: #e8f3d8;
  --color-seedling-200: #d4e1c0;
  --color-seedling-300: #bccda0;
  --color-seedling-400: #9cac83;
  --color-seedling-500: #809065;
  --color-seedling-600: #66744c;
  --color-seedling-700: #4f5c37;
  --color-seedling-800: #3d4827;
  --color-seedling-900: #2d371b;
  --color-seedling-950: #1b220e;
  --color-wasabi-nori: #2f3317;
  --color-wasabi-nori-50: #f4f8e5;
  --color-wasabi-nori-100: #eaeed9;
  --color-wasabi-nori-200: #d6dbc2;
  --color-wasabi-nori-300: #bfc4a8;
  --color-wasabi-nori-400: #9fa586;
  --color-wasabi-nori-500: #83896a;
  --color-wasabi-nori-600: #696e50;
  --color-wasabi-nori-700: #52563c;
  --color-wasabi-nori-800: #3f432c;
  --color-wasabi-nori-900: #2f3317;
  --color-wasabi-nori-950: #1d1f11;
  --color-cotton-boll: #e6efff;
  --color-cotton-boll-50: #f4f8ff;
  --color-cotton-boll-100: #e6efff;
  --color-cotton-boll-200: #d4dbe6;
  --color-cotton-boll-300: #bcc3d0;
  --color-cotton-boll-400: #9ba3b2;
  --color-cotton-boll-500: #7f8896;
  --color-cotton-boll-600: #656d7a;
  --color-cotton-boll-700: #4f5662;
  --color-cotton-boll-800: #3d434d;
  --color-cotton-boll-900: #2e333c;
  --color-cotton-boll-950: #1c1f26;
}