Iguana to Cotton Boll Color Palette

About this palette

Iguana to Cotton Boll is a 5-color muted, warm, earthy, vintage palette: #86895C (Iguana), #161B2F (Dark Knight), #58412B (Peat Brown), #E5A073 (Mexican Standoff), #E4EEFF (Cotton Boll). It mixes yellow, blue, brown, orange, white tones and feels warm overall. The strongest text pairing is #161B2F on #E4EEFF with a contrast ratio of 14.59:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Iguana	rgb(134, 137, 92)	hsl(64, 20%, 45%)
Dark Knight	rgb(22, 27, 47)	hsl(228, 36%, 14%)
Peat Brown	rgb(88, 65, 43)	hsl(29, 34%, 26%)
Mexican Standoff	rgb(229, 160, 115)	hsl(24, 69%, 67%)
Cotton Boll	rgb(228, 238, 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.

Aa14.59:1 Super#161B2F on #E4EEFF
Aa14.59:1 Super#E4EEFF on #161B2F
Aa8.15:1 Very good#58412B on #E4EEFF
Aa8.15:1 Very good#E4EEFF on #58412B
Aa7.80:1 Very good#161B2F on #E5A073
Aa7.80:1 Very good#E5A073 on #161B2F
Aa4.66:1 Good#86895C on #161B2F
Aa4.66:1 Good#161B2F on #86895C

Color blindness preview

CSS variables

/* Iguana to Cotton Boll — https://swatchly.xyz/palette/86895c-161b2f-58412b-e5a073-e4eeff */
:root {
  --iguana: #86895c;
  --dark-knight: #161b2f;
  --peat-brown: #58412b;
  --mexican-standoff: #e5a073;
  --cotton-boll: #e4eeff;
}

Tailwind CSS v4

/* Iguana to Cotton Boll — https://swatchly.xyz/palette/86895c-161b2f-58412b-e5a073-e4eeff */
@theme {
  --color-iguana: #86895c;
  --color-iguana-50: #f5f8dd;
  --color-iguana-100: #ebeed0;
  --color-iguana-200: #d7dab7;
  --color-iguana-300: #c1c49c;
  --color-iguana-400: #a1a578;
  --color-iguana-500: #86895c;
  --color-iguana-600: #6c6f43;
  --color-iguana-700: #565830;
  --color-iguana-800: #434522;
  --color-iguana-900: #333517;
  --color-iguana-950: #20210b;
  --color-dark-knight: #161b2f;
  --color-dark-knight-50: #f2f5ff;
  --color-dark-knight-100: #e5ebfc;
  --color-dark-knight-200: #d0d7ec;
  --color-dark-knight-300: #b9c0d8;
  --color-dark-knight-400: #99a1ba;
  --color-dark-knight-500: #7d859e;
  --color-dark-knight-600: #636a82;
  --color-dark-knight-700: #4c5368;
  --color-dark-knight-800: #3a3f52;
  --color-dark-knight-900: #2b303f;
  --color-dark-knight-950: #161b2f;
  --color-peat-brown: #58412b;
  --color-peat-brown-50: #fff3e8;
  --color-peat-brown-100: #f9e8d8;
  --color-peat-brown-200: #e8d3c0;
  --color-peat-brown-300: #d4bda8;
  --color-peat-brown-400: #b79e86;
  --color-peat-brown-500: #9d836b;
  --color-peat-brown-600: #826952;
  --color-peat-brown-700: #6a543f;
  --color-peat-brown-800: #58412b;
  --color-peat-brown-900: #433222;
  --color-peat-brown-950: #2b1f13;
  --color-mexican-standoff: #e5a073;
  --color-mexican-standoff-50: #ffe8da;
  --color-mexican-standoff-100: #ffd8bf;
  --color-mexican-standoff-200: #f6bd98;
  --color-mexican-standoff-300: #e5a073;
  --color-mexican-standoff-400: #c68458;
  --color-mexican-standoff-500: #ab6b3f;
  --color-mexican-standoff-600: #905429;
  --color-mexican-standoff-700: #774118;
  --color-mexican-standoff-800: #62320c;
  --color-mexican-standoff-900: #502605;
  --color-mexican-standoff-950: #341601;
  --color-cotton-boll: #e4eeff;
  --color-cotton-boll-50: #f3f7ff;
  --color-cotton-boll-100: #e4eeff;
  --color-cotton-boll-200: #d2dae6;
  --color-cotton-boll-300: #bbc3d1;
  --color-cotton-boll-400: #9aa3b2;
  --color-cotton-boll-500: #7e8797;
  --color-cotton-boll-600: #646d7b;
  --color-cotton-boll-700: #4e5663;
  --color-cotton-boll-800: #3c434e;
  --color-cotton-boll-900: #2d333d;
  --color-cotton-boll-950: #1b1f26;
}