Start generating

Cotton Boll to Burnt Coffee color palette

E4EEFFCotton BollA0B0EFWondrous WisteriaA7436CHot51947DHighlands004639Tropical Forest251A05Burnt Coffee
Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Burnt Coffee is a 6-color palette: #E4EEFF (Cotton Boll), #A0B0EF (Wondrous Wisteria), #A7436C (Hot), #51947D (Highlands), #004639 (Tropical Forest), #251A05 (Burnt Coffee). It mixes white, blue, red, turquoise, brown tones and feels cool overall. The strongest text pairing is #E4EEFF on #251A05 with a contrast ratio of 14.63:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cotton Bollrgb(228, 238, 255)hsl(218, 100%, 95%)
Wondrous Wisteriargb(160, 176, 239)hsl(228, 71%, 78%)
Hotrgb(167, 67, 108)hsl(335, 43%, 46%)
Highlandsrgb(81, 148, 125)hsl(159, 29%, 45%)
Tropical Forestrgb(0, 70, 57)hsl(169, 100%, 14%)
Burnt Coffeergb(37, 26, 5)hsl(39, 76%, 8%)

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.63:1 Super#E4EEFF on #251A05
  • Aa14.63:1 Super#251A05 on #E4EEFF
  • Aa9.29:1 Very good#E4EEFF on #004639
  • Aa9.29:1 Very good#004639 on #E4EEFF
  • Aa8.10:1 Very good#A0B0EF on #251A05
  • Aa8.10:1 Very good#251A05 on #A0B0EF
  • Aa5.14:1 Good#A0B0EF on #004639
  • Aa5.14:1 Good#004639 on #A0B0EF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cotton Boll to Burnt Coffee — https://swatchly.xyz/palette/e4eeff-a0b0ef-a7436c-51947d-004639-251a05 */
:root {
  --cotton-boll: #e4eeff;
  --wondrous-wisteria: #a0b0ef;
  --hot: #a7436c;
  --highlands: #51947d;
  --tropical-forest: #004639;
  --burnt-coffee: #251a05;
}

Tailwind CSS v4

/* Cotton Boll to Burnt Coffee — https://swatchly.xyz/palette/e4eeff-a0b0ef-a7436c-51947d-004639-251a05 */
@theme {
  --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;
  --color-wondrous-wisteria: #a0b0ef;
  --color-wondrous-wisteria-50: #e8eeff;
  --color-wondrous-wisteria-100: #d8e1ff;
  --color-wondrous-wisteria-200: #bccafd;
  --color-wondrous-wisteria-300: #a0b0ef;
  --color-wondrous-wisteria-400: #8493cf;
  --color-wondrous-wisteria-500: #6c7ab5;
  --color-wondrous-wisteria-600: #556299;
  --color-wondrous-wisteria-700: #424d80;
  --color-wondrous-wisteria-800: #333d69;
  --color-wondrous-wisteria-900: #282f55;
  --color-wondrous-wisteria-950: #171d38;
  --color-hot: #a7436c;
  --color-hot-50: #fff1f5;
  --color-hot-100: #ffe2eb;
  --color-hot-200: #ffc5d8;
  --color-hot-300: #fea0c1;
  --color-hot-400: #e27ca2;
  --color-hot-500: #c55e86;
  --color-hot-600: #a7436c;
  --color-hot-700: #893055;
  --color-hot-800: #6f2043;
  --color-hot-900: #581533;
  --color-hot-950: #3a091f;
  --color-highlands: #51947d;
  --color-highlands-50: #dafff0;
  --color-highlands-100: #ccf6e5;
  --color-highlands-200: #b2e4d0;
  --color-highlands-300: #95ceb9;
  --color-highlands-400: #6fb099;
  --color-highlands-500: #51947d;
  --color-highlands-600: #377963;
  --color-highlands-700: #23614e;
  --color-highlands-800: #144d3c;
  --color-highlands-900: #0a3c2e;
  --color-highlands-950: #03261c;
  --color-tropical-forest: #004639;
  --color-tropical-forest-50: #ddfef4;
  --color-tropical-forest-100: #d0f5ea;
  --color-tropical-forest-200: #b7e3d6;
  --color-tropical-forest-300: #99ccbd;
  --color-tropical-forest-400: #73ac9c;
  --color-tropical-forest-500: #558f80;
  --color-tropical-forest-600: #3a7364;
  --color-tropical-forest-700: #265a4d;
  --color-tropical-forest-800: #004639;
  --color-tropical-forest-900: #0e342c;
  --color-tropical-forest-950: #06201a;
  --color-burnt-coffee: #251a05;
  --color-burnt-coffee-50: #fcf4e6;
  --color-burnt-coffee-100: #f3eada;
  --color-burnt-coffee-200: #e1d6c3;
  --color-burnt-coffee-300: #ccbfaa;
  --color-burnt-coffee-400: #ada088;
  --color-burnt-coffee-500: #91846c;
  --color-burnt-coffee-600: #766952;
  --color-burnt-coffee-700: #5d523d;
  --color-burnt-coffee-800: #483e2d;
  --color-burnt-coffee-900: #372f20;
  --color-burnt-coffee-950: #251a05;
}

Similar palettes