Cotton Boll to Dark Olive Color Palette

About this palette

Cotton Boll to Dark Olive is a 5-color palette: #E3F5FF (Cotton Boll), #FF9642 (Pastel Orange), #0092C2 (Swimmer), #7146D3 (Purple Rain), #383A00 (Dark Olive). It mixes white, orange, blue, purple, brown tones and feels balanced overall. The strongest text pairing is #E3F5FF on #383A00 with a contrast ratio of 10.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(227, 245, 255)	hsl(201, 100%, 95%)
Pastel Orange	rgb(255, 150, 66)	hsl(27, 100%, 63%)
Swimmer	rgb(0, 146, 194)	hsl(195, 100%, 38%)
Purple Rain	rgb(113, 70, 211)	hsl(258, 62%, 55%)
Dark Olive	rgb(56, 58, 0)	hsl(62, 100%, 11%)

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.

Aa10.58:1 Very good#E3F5FF on #383A00
Aa10.58:1 Very good#383A00 on #E3F5FF
Aa5.47:1 Good#FF9642 on #383A00
Aa5.47:1 Good#383A00 on #FF9642
Aa5.33:1 Good#E3F5FF on #7146D3
Aa5.33:1 Good#7146D3 on #E3F5FF
Aa3.32:1 Poor#0092C2 on #383A00
Aa3.32:1 Poor#383A00 on #0092C2

Color blindness preview

CSS variables

/* Cotton Boll to Dark Olive — https://swatchly.xyz/palette/e3f5ff-ff9642-0092c2-7146d3-383a00 */
:root {
  --cotton-boll: #e3f5ff;
  --pastel-orange: #ff9642;
  --swimmer: #0092c2;
  --purple-rain: #7146d3;
  --dark-olive: #383a00;
}

Tailwind CSS v4

/* Cotton Boll to Dark Olive — https://swatchly.xyz/palette/e3f5ff-ff9642-0092c2-7146d3-383a00 */
@theme {
  --color-cotton-boll: #e3f5ff;
  --color-cotton-boll-50: #e3f5ff;
  --color-cotton-boll-100: #dfeaf1;
  --color-cotton-boll-200: #cad8df;
  --color-cotton-boll-300: #b3c2ca;
  --color-cotton-boll-400: #93a3ac;
  --color-cotton-boll-500: #788891;
  --color-cotton-boll-600: #5f6e77;
  --color-cotton-boll-700: #4a585f;
  --color-cotton-boll-800: #38444b;
  --color-cotton-boll-900: #2a353a;
  --color-cotton-boll-950: #192025;
  --color-pastel-orange: #ff9642;
  --color-pastel-orange-50: #ffeadc;
  --color-pastel-orange-100: #ffdac1;
  --color-pastel-orange-200: #ffbc8d;
  --color-pastel-orange-300: #ff9642;
  --color-pastel-orange-400: #dd7920;
  --color-pastel-orange-500: #bd6200;
  --color-pastel-orange-600: #9a4f00;
  --color-pastel-orange-700: #7d3e00;
  --color-pastel-orange-800: #643100;
  --color-pastel-orange-900: #502600;
  --color-pastel-orange-950: #341600;
  --color-swimmer: #0092c2;
  --color-swimmer-50: #eaf8ff;
  --color-swimmer-100: #d4f0ff;
  --color-swimmer-200: #a5e1ff;
  --color-swimmer-300: #72cdf8;
  --color-swimmer-400: #41aedd;
  --color-swimmer-500: #0092c2;
  --color-swimmer-600: #00769d;
  --color-swimmer-700: #005d7d;
  --color-swimmer-800: #004963;
  --color-swimmer-900: #00384d;
  --color-swimmer-950: #002332;
  --color-purple-rain: #7146d3;
  --color-purple-rain-50: #f5f3ff;
  --color-purple-rain-100: #ebe7ff;
  --color-purple-rain-200: #d7d0ff;
  --color-purple-rain-300: #c1b4ff;
  --color-purple-rain-400: #a389ff;
  --color-purple-rain-500: #8b64f2;
  --color-purple-rain-600: #7146d3;
  --color-purple-rain-700: #5b31b0;
  --color-purple-rain-800: #482191;
  --color-purple-rain-900: #381576;
  --color-purple-rain-950: #23094f;
  --color-dark-olive: #383a00;
  --color-dark-olive-50: #f5f8d9;
  --color-dark-olive-100: #ebefcc;
  --color-dark-olive-200: #d8dcb2;
  --color-dark-olive-300: #c1c696;
  --color-dark-olive-400: #a3a773;
  --color-dark-olive-500: #898c57;
  --color-dark-olive-600: #6f723f;
  --color-dark-olive-700: #595c2c;
  --color-dark-olive-800: #47491e;
  --color-dark-olive-900: #383a00;
  --color-dark-olive-950: #232408;
}