Lama to Cotton Boll Color Palette

About this palette

Lama to Cotton Boll is a 5-color pastel, light, cool palette: #E4BC96 (Lama), #DBD1FF (Icy Plains), #B4E3FF (Frozen Landscape), #DDEACB (Breath of Celery), #E3ECFF (Cotton Boll). It mixes orange, purple, blue, green, white tones and feels cool overall. The strongest text pairing is #E4BC96 on #E3ECFF with a contrast ratio of 1.48:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lama	rgb(228, 188, 150)	hsl(29, 59%, 74%)
Icy Plains	rgb(219, 209, 255)	hsl(253, 100%, 91%)
Frozen Landscape	rgb(180, 227, 255)	hsl(202, 100%, 85%)
Breath of Celery	rgb(221, 234, 203)	hsl(85, 42%, 86%)
Cotton Boll	rgb(227, 236, 255)	hsl(221, 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.

Color blindness preview

CSS variables

/* Lama to Cotton Boll — https://swatchly.xyz/palette/e4bc96-dbd1ff-b4e3ff-ddeacb-e3ecff */
:root {
  --lama: #e4bc96;
  --icy-plains: #dbd1ff;
  --frozen-landscape: #b4e3ff;
  --breath-of-celery: #ddeacb;
  --cotton-boll: #e3ecff;
}

Tailwind CSS v4

/* Lama to Cotton Boll — https://swatchly.xyz/palette/e4bc96-dbd1ff-b4e3ff-ddeacb-e3ecff */
@theme {
  --color-lama: #e4bc96;
  --color-lama-50: #fff5ec;
  --color-lama-100: #ffe9d5;
  --color-lama-200: #f2d5b9;
  --color-lama-300: #e4bc96;
  --color-lama-400: #c19c79;
  --color-lama-500: #a5805c;
  --color-lama-600: #896542;
  --color-lama-700: #6f4f2f;
  --color-lama-800: #583c20;
  --color-lama-900: #452d15;
  --color-lama-950: #2c1b0a;
  --color-icy-plains: #dbd1ff;
  --color-icy-plains-50: #f6f4ff;
  --color-icy-plains-100: #ede9ff;
  --color-icy-plains-200: #dbd1ff;
  --color-icy-plains-300: #c4bce2;
  --color-icy-plains-400: #a49bc5;
  --color-icy-plains-500: #897fa9;
  --color-icy-plains-600: #6e658d;
  --color-icy-plains-700: #584f73;
  --color-icy-plains-800: #443d5c;
  --color-icy-plains-900: #342e48;
  --color-icy-plains-950: #201c2f;
  --color-frozen-landscape: #b4e3ff;
  --color-frozen-landscape-50: #f0f9ff;
  --color-frozen-landscape-100: #ddf2ff;
  --color-frozen-landscape-200: #b4e3ff;
  --color-frozen-landscape-300: #a4cae1;
  --color-frozen-landscape-400: #80abc4;
  --color-frozen-landscape-500: #628fa8;
  --color-frozen-landscape-600: #48738b;
  --color-frozen-landscape-700: #345b71;
  --color-frozen-landscape-800: #24475a;
  --color-frozen-landscape-900: #193747;
  --color-frozen-landscape-950: #0c222e;
  --color-breath-of-celery: #ddeacb;
  --color-breath-of-celery-50: #ebf3e0;
  --color-breath-of-celery-100: #ddeacb;
  --color-breath-of-celery-200: #ccd6bf;
  --color-breath-of-celery-300: #b6c1a7;
  --color-breath-of-celery-400: #98a387;
  --color-breath-of-celery-500: #7e896d;
  --color-breath-of-celery-600: #657055;
  --color-breath-of-celery-700: #505a41;
  --color-breath-of-celery-800: #3d4631;
  --color-breath-of-celery-900: #2f3624;
  --color-breath-of-celery-950: #1c2114;
  --color-cotton-boll: #e3ecff;
  --color-cotton-boll-50: #f1f6ff;
  --color-cotton-boll-100: #e3ecff;
  --color-cotton-boll-200: #d2d8e6;
  --color-cotton-boll-300: #bac1d1;
  --color-cotton-boll-400: #9aa2b3;
  --color-cotton-boll-500: #7e8697;
  --color-cotton-boll-600: #646c7c;
  --color-cotton-boll-700: #4e5564;
  --color-cotton-boll-800: #3c424f;
  --color-cotton-boll-900: #2e333e;
  --color-cotton-boll-950: #1c1f27;
}