Morris Leaf to Calm Waters Color Palette

About this palette

Morris Leaf to Calm Waters is a 4-color pastel, light, cool palette: #C9D7A1 (Morris Leaf), #9AD4FF (Baby Blue), #B0F2F6 (Ice Citadel), #E4FAFF (Calm Waters). It mixes green, blue, turquoise, white tones and feels cool overall. The strongest text pairing is #9AD4FF on #E4FAFF with a contrast ratio of 1.47:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Morris Leaf	rgb(201, 215, 161)	hsl(76, 40%, 74%)
Baby Blue	rgb(154, 212, 255)	hsl(206, 100%, 80%)
Ice Citadel	rgb(176, 242, 246)	hsl(183, 80%, 83%)
Calm Waters	rgb(228, 250, 255)	hsl(191, 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.

Color blindness preview

CSS variables

/* Morris Leaf to Calm Waters — https://swatchly.xyz/palette/c9d7a1-9ad4ff-b0f2f6-e4faff */
:root {
  --morris-leaf: #c9d7a1;
  --baby-blue: #9ad4ff;
  --ice-citadel: #b0f2f6;
  --calm-waters: #e4faff;
}

Tailwind CSS v4

/* Morris Leaf to Calm Waters — https://swatchly.xyz/palette/c9d7a1-9ad4ff-b0f2f6-e4faff */
@theme {
  --color-morris-leaf: #c9d7a1;
  --color-morris-leaf-50: #ecf4d4;
  --color-morris-leaf-100: #e0eac6;
  --color-morris-leaf-200: #c9d7a1;
  --color-morris-leaf-300: #b5c192;
  --color-morris-leaf-400: #97a371;
  --color-morris-leaf-500: #7d8956;
  --color-morris-leaf-600: #64703f;
  --color-morris-leaf-700: #4f5a2d;
  --color-morris-leaf-800: #3e471f;
  --color-morris-leaf-900: #2f3715;
  --color-morris-leaf-950: #1d2209;
  --color-baby-blue: #9ad4ff;
  --color-baby-blue-50: #def0ff;
  --color-baby-blue-100: #c7e7ff;
  --color-baby-blue-200: #9ad4ff;
  --color-baby-blue-300: #8cbfe4;
  --color-baby-blue-400: #6aa1c9;
  --color-baby-blue-500: #5087af;
  --color-baby-blue-600: #386e94;
  --color-baby-blue-700: #26597b;
  --color-baby-blue-800: #194765;
  --color-baby-blue-900: #0e3650;
  --color-baby-blue-950: #052234;
  --color-ice-citadel: #b0f2f6;
  --color-ice-citadel-50: #d2f8fa;
  --color-ice-citadel-100: #b0f2f6;
  --color-ice-citadel-200: #abdcdf;
  --color-ice-citadel-300: #90c8cb;
  --color-ice-citadel-400: #6dabae;
  --color-ice-citadel-500: #509094;
  --color-ice-citadel-600: #37767a;
  --color-ice-citadel-700: #245f63;
  --color-ice-citadel-800: #154b4e;
  --color-ice-citadel-900: #0a3a3d;
  --color-ice-citadel-950: #032426;
  --color-calm-waters: #e4faff;
  --color-calm-waters-50: #e4faff;
  --color-calm-waters-100: #e1eef1;
  --color-calm-waters-200: #cbdbdf;
  --color-calm-waters-300: #b3c5c9;
  --color-calm-waters-400: #92a6aa;
  --color-calm-waters-500: #768a8f;
  --color-calm-waters-600: #5d7074;
  --color-calm-waters-700: #47595d;
  --color-calm-waters-800: #364549;
  --color-calm-waters-900: #293538;
  --color-calm-waters-950: #182123;
}