Medium Roast to Cotton Boll color palette

3B2100Medium Roast 664723Florida’s Alligator B15E1BPolished Copper 84C7FFNevermind Nirvana E3F3FFCotton Boll

Open in generator Export PNG, PDF, ASE…

About this palette

Medium Roast to Cotton Boll is a 5-color warm, earthy, vintage palette: #3B2100 (Medium Roast), #664723 (Florida’s Alligator), #B15E1B (Polished Copper), #84C7FF (Nevermind Nirvana), #E3F3FF (Cotton Boll). It mixes brown, blue, white tones and feels warm overall. The strongest text pairing is #3B2100 on #E3F3FF with a contrast ratio of 13.20:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Medium Roast	rgb(59, 33, 0)	hsl(34, 100%, 12%)
Florida’s Alligator	rgb(102, 71, 35)	hsl(32, 49%, 27%)
Polished Copper	rgb(177, 94, 27)	hsl(27, 74%, 40%)
Nevermind Nirvana	rgb(132, 199, 255)	hsl(207, 100%, 76%)
Cotton Boll	rgb(227, 243, 255)	hsl(206, 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.

Aa13.20:1 Super#3B2100 on #E3F3FF
Aa13.20:1 Super#E3F3FF on #3B2100
Aa8.26:1 Very good#3B2100 on #84C7FF
Aa8.26:1 Very good#84C7FF on #3B2100
Aa7.44:1 Very good#664723 on #E3F3FF
Aa7.44:1 Very good#E3F3FF on #664723
Aa4.66:1 Good#664723 on #84C7FF
Aa4.66:1 Good#84C7FF on #664723

Color blindness preview

CSS variables

/* Medium Roast to Cotton Boll — https://swatchly.xyz/palette/3b2100-664723-b15e1b-84c7ff-e3f3ff */
:root {
  --medium-roast: #3b2100;
  --florida-s-alligator: #664723;
  --polished-copper: #b15e1b;
  --nevermind-nirvana: #84c7ff;
  --cotton-boll: #e3f3ff;
}

Tailwind CSS v4

/* Medium Roast to Cotton Boll — https://swatchly.xyz/palette/3b2100-664723-b15e1b-84c7ff-e3f3ff */
@theme {
  --color-medium-roast: #3b2100;
  --color-medium-roast-50: #fff3e7;
  --color-medium-roast-100: #fde7d1;
  --color-medium-roast-200: #ecd3b9;
  --color-medium-roast-300: #d8bb9e;
  --color-medium-roast-400: #ba9b7b;
  --color-medium-roast-500: #a18160;
  --color-medium-roast-600: #876949;
  --color-medium-roast-700: #705436;
  --color-medium-roast-800: #5c4328;
  --color-medium-roast-900: #4b361e;
  --color-medium-roast-950: #3b2100;
  --color-florida-s-alligator: #664723;
  --color-florida-s-alligator-50: #fff3e6;
  --color-florida-s-alligator-100: #fee7cf;
  --color-florida-s-alligator-200: #edd1b4;
  --color-florida-s-alligator-300: #d7b897;
  --color-florida-s-alligator-400: #b89772;
  --color-florida-s-alligator-500: #9c7a55;
  --color-florida-s-alligator-600: #7e5f3c;
  --color-florida-s-alligator-700: #664723;
  --color-florida-s-alligator-800: #4f371c;
  --color-florida-s-alligator-900: #3e2a12;
  --color-florida-s-alligator-950: #271908;
  --color-polished-copper: #b15e1b;
  --color-polished-copper-50: #fff2eb;
  --color-polished-copper-100: #ffe8da;
  --color-polished-copper-200: #ffd1b4;
  --color-polished-copper-300: #ffb483;
  --color-polished-copper-400: #e6935b;
  --color-polished-copper-500: #cc783b;
  --color-polished-copper-600: #b15e1b;
  --color-polished-copper-700: #914700;
  --color-polished-copper-800: #723700;
  --color-polished-copper-900: #592900;
  --color-polished-copper-950: #391800;
  --color-nevermind-nirvana: #84c7ff;
  --color-nevermind-nirvana-50: #ecf6ff;
  --color-nevermind-nirvana-100: #d9edff;
  --color-nevermind-nirvana-200: #b3dcff;
  --color-nevermind-nirvana-300: #84c7ff;
  --color-nevermind-nirvana-400: #68a7db;
  --color-nevermind-nirvana-500: #4a8bc0;
  --color-nevermind-nirvana-600: #2f70a3;
  --color-nevermind-nirvana-700: #1b5987;
  --color-nevermind-nirvana-800: #0b466d;
  --color-nevermind-nirvana-900: #033657;
  --color-nevermind-nirvana-950: #002139;
  --color-cotton-boll: #e3f3ff;
  --color-cotton-boll-50: #e3f3ff;
  --color-cotton-boll-100: #dfe9f1;
  --color-cotton-boll-200: #cad6df;
  --color-cotton-boll-300: #b3c1cb;
  --color-cotton-boll-400: #94a2ad;
  --color-cotton-boll-500: #798892;
  --color-cotton-boll-600: #606e78;
  --color-cotton-boll-700: #4b5760;
  --color-cotton-boll-800: #39444c;
  --color-cotton-boll-900: #2b343b;
  --color-cotton-boll-950: #1a2025;
}