Cotton Boll to Night Kite color palette

E5F5FFCotton Boll 9FC5D7Metal Gear 8CD4FFSky 5C8A9CHorizon 25607DNautical Creatures 005274Night Kite

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Night Kite is a 6-color cool, monochromatic palette: #E5F5FF (Cotton Boll), #9FC5D7 (Metal Gear), #8CD4FF (Sky), #5C8A9C (Horizon), #25607D (Nautical Creatures), #005274 (Night Kite). It mixes white, blue tones and feels cool overall. The strongest text pairing is #E5F5FF on #005274 with a contrast ratio of 7.66:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(229, 245, 255)	hsl(203, 100%, 95%)
Metal Gear	rgb(159, 197, 215)	hsl(199, 41%, 73%)
Sky	rgb(140, 212, 255)	hsl(202, 100%, 77%)
Horizon	rgb(92, 138, 156)	hsl(197, 26%, 49%)
Nautical Creatures	rgb(37, 96, 125)	hsl(200, 54%, 32%)
Night Kite	rgb(0, 82, 116)	hsl(198, 100%, 23%)

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.

Aa7.66:1 Very good#E5F5FF on #005274
Aa7.66:1 Very good#005274 on #E5F5FF
Aa6.18:1 Good#E5F5FF on #25607D
Aa6.18:1 Good#25607D on #E5F5FF
Aa5.28:1 Good#8CD4FF on #005274
Aa5.28:1 Good#005274 on #8CD4FF
Aa4.65:1 Good#9FC5D7 on #005274
Aa4.65:1 Good#005274 on #9FC5D7

Color blindness preview

CSS variables

/* Cotton Boll to Night Kite — https://swatchly.xyz/palette/e5f5ff-9fc5d7-8cd4ff-5c8a9c-25607d-005274 */
:root {
  --cotton-boll: #e5f5ff;
  --metal-gear: #9fc5d7;
  --sky: #8cd4ff;
  --horizon: #5c8a9c;
  --nautical-creatures: #25607d;
  --night-kite: #005274;
}

Tailwind CSS v4

/* Cotton Boll to Night Kite — https://swatchly.xyz/palette/e5f5ff-9fc5d7-8cd4ff-5c8a9c-25607d-005274 */
@theme {
  --color-cotton-boll: #e5f5ff;
  --color-cotton-boll-50: #e5f5ff;
  --color-cotton-boll-100: #e0eaf1;
  --color-cotton-boll-200: #ccd8df;
  --color-cotton-boll-300: #b5c2ca;
  --color-cotton-boll-400: #95a3ac;
  --color-cotton-boll-500: #7a8891;
  --color-cotton-boll-600: #606e77;
  --color-cotton-boll-700: #4b575f;
  --color-cotton-boll-800: #39444b;
  --color-cotton-boll-900: #2b343a;
  --color-cotton-boll-950: #1a2024;
  --color-metal-gear: #9fc5d7;
  --color-metal-gear-50: #e6f7ff;
  --color-metal-gear-100: #d6eefa;
  --color-metal-gear-200: #bedbe8;
  --color-metal-gear-300: #9fc5d7;
  --color-metal-gear-400: #82a6b6;
  --color-metal-gear-500: #668b9c;
  --color-metal-gear-600: #4e7080;
  --color-metal-gear-700: #3a5a68;
  --color-metal-gear-800: #2a4653;
  --color-metal-gear-900: #1f3641;
  --color-metal-gear-950: #11222a;
  --color-sky: #8cd4ff;
  --color-sky-50: #f4fbff;
  --color-sky-100: #e3f4ff;
  --color-sky-200: #bde6ff;
  --color-sky-300: #8cd4ff;
  --color-sky-400: #6fb2d9;
  --color-sky-500: #4e95bd;
  --color-sky-600: #30789e;
  --color-sky-700: #185f82;
  --color-sky-800: #064968;
  --color-sky-900: #003751;
  --color-sky-950: #002234;
  --color-horizon: #5c8a9c;
  --color-horizon-50: #e6f8ff;
  --color-horizon-100: #d1f0fc;
  --color-horizon-200: #b8dceb;
  --color-horizon-300: #9dc6d6;
  --color-horizon-400: #79a6b8;
  --color-horizon-500: #5c8a9c;
  --color-horizon-600: #447081;
  --color-horizon-700: #305969;
  --color-horizon-800: #224653;
  --color-horizon-900: #173642;
  --color-horizon-950: #0c222a;
  --color-nautical-creatures: #25607d;
  --color-nautical-creatures-50: #ebf7ff;
  --color-nautical-creatures-100: #d6f0ff;
  --color-nautical-creatures-200: #b4dff8;
  --color-nautical-creatures-300: #99cae6;
  --color-nautical-creatures-400: #75acca;
  --color-nautical-creatures-500: #5791b0;
  --color-nautical-creatures-600: #3e7794;
  --color-nautical-creatures-700: #25607d;
  --color-nautical-creatures-800: #1a4b63;
  --color-nautical-creatures-900: #0f3a4e;
  --color-nautical-creatures-950: #052433;
  --color-night-kite: #005274;
  --color-night-kite-50: #ebf7ff;
  --color-night-kite-100: #d6efff;
  --color-night-kite-200: #aedffd;
  --color-night-kite-300: #93cbec;
  --color-night-kite-400: #6faed2;
  --color-night-kite-500: #5294b9;
  --color-night-kite-600: #387a9e;
  --color-night-kite-700: #246485;
  --color-night-kite-800: #005274;
  --color-night-kite-900: #073f59;
  --color-night-kite-950: #01283b;
}