Start generating

Cotton Boll to Graphite color palette

E8F3FFCotton BollF3B3BBIbis9EA769Willow Leaf5C7C94Whale Shark7F4A56Nocturne Red303B26Graphite
Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Graphite is a 6-color muted palette: #E8F3FF (Cotton Boll), #F3B3BB (Ibis), #9EA769 (Willow Leaf), #5C7C94 (Whale Shark), #7F4A56 (Nocturne Red), #303B26 (Graphite). It mixes white, pink, green, blue, red tones and feels cool overall. The strongest text pairing is #E8F3FF on #303B26 with a contrast ratio of 10.51:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cotton Bollrgb(232, 243, 255)hsl(211, 100%, 95%)
Ibisrgb(243, 179, 187)hsl(352, 73%, 83%)
Willow Leafrgb(158, 167, 105)hsl(69, 26%, 53%)
Whale Sharkrgb(92, 124, 148)hsl(206, 23%, 47%)
Nocturne Redrgb(127, 74, 86)hsl(346, 26%, 39%)
Graphitergb(48, 59, 38)hsl(91, 22%, 19%)

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.51:1 Very good#E8F3FF on #303B26
  • Aa10.51:1 Very good#303B26 on #E8F3FF
  • Aa6.73:1 Good#F3B3BB on #303B26
  • Aa6.73:1 Good#303B26 on #F3B3BB
  • Aa6.20:1 Good#E8F3FF on #7F4A56
  • Aa6.20:1 Good#7F4A56 on #E8F3FF
  • Aa4.60:1 Good#9EA769 on #303B26
  • Aa4.60:1 Good#303B26 on #9EA769

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cotton Boll to Graphite — https://swatchly.xyz/palette/e8f3ff-f3b3bb-9ea769-5c7c94-7f4a56-303b26 */
:root {
  --cotton-boll: #e8f3ff;
  --ibis: #f3b3bb;
  --willow-leaf: #9ea769;
  --whale-shark: #5c7c94;
  --nocturne-red: #7f4a56;
  --graphite: #303b26;
}

Tailwind CSS v4

/* Cotton Boll to Graphite — https://swatchly.xyz/palette/e8f3ff-f3b3bb-9ea769-5c7c94-7f4a56-303b26 */
@theme {
  --color-cotton-boll: #e8f3ff;
  --color-cotton-boll-50: #e8f3ff;
  --color-cotton-boll-100: #e2e9f1;
  --color-cotton-boll-200: #ced6df;
  --color-cotton-boll-300: #b7c0ca;
  --color-cotton-boll-400: #98a2ac;
  --color-cotton-boll-500: #7d8792;
  --color-cotton-boll-600: #646d77;
  --color-cotton-boll-700: #4e565f;
  --color-cotton-boll-800: #3c434b;
  --color-cotton-boll-900: #2d343a;
  --color-cotton-boll-950: #1b2025;
  --color-ibis: #f3b3bb;
  --color-ibis-50: #fff5f6;
  --color-ibis-100: #ffe9eb;
  --color-ibis-200: #fecfd4;
  --color-ibis-300: #f3b3bb;
  --color-ibis-400: #cf949b;
  --color-ibis-500: #b2777f;
  --color-ibis-600: #945c64;
  --color-ibis-700: #79464e;
  --color-ibis-800: #60343b;
  --color-ibis-900: #4b262c;
  --color-ibis-950: #30161a;
  --color-willow-leaf: #9ea769;
  --color-willow-leaf-50: #f3f9d6;
  --color-willow-leaf-100: #e9efc8;
  --color-willow-leaf-200: #d4dcad;
  --color-willow-leaf-300: #bec690;
  --color-willow-leaf-400: #9ea769;
  --color-willow-leaf-500: #838b4e;
  --color-willow-leaf-600: #697135;
  --color-willow-leaf-700: #535a23;
  --color-willow-leaf-800: #414615;
  --color-willow-leaf-900: #32360b;
  --color-willow-leaf-950: #1e2204;
  --color-whale-shark: #5c7c94;
  --color-whale-shark-50: #ecf7ff;
  --color-whale-shark-100: #def0ff;
  --color-whale-shark-200: #c7e0f3;
  --color-whale-shark-300: #b0cce1;
  --color-whale-shark-400: #8fafc6;
  --color-whale-shark-500: #7595ae;
  --color-whale-shark-600: #5c7c94;
  --color-whale-shark-700: #456379;
  --color-whale-shark-800: #334d60;
  --color-whale-shark-900: #243b4b;
  --color-whale-shark-950: #142430;
  --color-nocturne-red: #7f4a56;
  --color-nocturne-red-50: #fff1f3;
  --color-nocturne-red-100: #ffe3e8;
  --color-nocturne-red-200: #f9cbd3;
  --color-nocturne-red-300: #e8b3be;
  --color-nocturne-red-400: #cc939f;
  --color-nocturne-red-500: #b27985;
  --color-nocturne-red-600: #96606b;
  --color-nocturne-red-700: #7f4a56;
  --color-nocturne-red-800: #653943;
  --color-nocturne-red-900: #4f2a33;
  --color-nocturne-red-950: #34191f;
  --color-graphite: #303b26;
  --color-graphite-50: #f0f8ea;
  --color-graphite-100: #e6efde;
  --color-graphite-200: #d1dcc8;
  --color-graphite-300: #bac6b0;
  --color-graphite-400: #9aa790;
  --color-graphite-500: #808d75;
  --color-graphite-600: #67735c;
  --color-graphite-700: #515d48;
  --color-graphite-800: #404a37;
  --color-graphite-900: #303b26;
  --color-graphite-950: #1f2519;
}

Similar palettes