Melting Glacier to Camping Trip Color Palette

About this palette

Melting Glacier to Camping Trip is a 4-color muted, cool palette: #E7FDF6 (Melting Glacier), #98BBC2 (Shallow Sea), #354B37 (Mountain View), #5E7762 (Camping Trip). It mixes white, turquoise, green tones and feels cool overall. The strongest text pairing is #E7FDF6 on #354B37 with a contrast ratio of 8.94:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melting Glacier	rgb(231, 253, 246)	hsl(161, 85%, 95%)
Shallow Sea	rgb(152, 187, 194)	hsl(190, 26%, 68%)
Mountain View	rgb(53, 75, 55)	hsl(125, 17%, 25%)
Camping Trip	rgb(94, 119, 98)	hsl(130, 12%, 42%)

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.

Aa8.94:1 Very good#E7FDF6 on #354B37
Aa8.94:1 Very good#354B37 on #E7FDF6
Aa4.62:1 Good#98BBC2 on #354B37
Aa4.62:1 Good#354B37 on #98BBC2
Aa4.61:1 Good#E7FDF6 on #5E7762
Aa4.61:1 Good#5E7762 on #E7FDF6

Color blindness preview

CSS variables

/* Melting Glacier to Camping Trip — https://swatchly.xyz/palette/e7fdf6-98bbc2-354b37-5e7762 */
:root {
  --melting-glacier: #e7fdf6;
  --shallow-sea: #98bbc2;
  --mountain-view: #354b37;
  --camping-trip: #5e7762;
}

Tailwind CSS v4

/* Melting Glacier to Camping Trip — https://swatchly.xyz/palette/e7fdf6-98bbc2-354b37-5e7762 */
@theme {
  --color-melting-glacier: #e7fdf6;
  --color-melting-glacier-50: #e7fdf6;
  --color-melting-glacier-100: #e3f0ec;
  --color-melting-glacier-200: #cdddd8;
  --color-melting-glacier-300: #b5c7c1;
  --color-melting-glacier-400: #94a7a1;
  --color-melting-glacier-500: #788c85;
  --color-melting-glacier-600: #5e716b;
  --color-melting-glacier-700: #485a54;
  --color-melting-glacier-800: #374642;
  --color-melting-glacier-900: #293632;
  --color-melting-glacier-950: #18221f;
  --color-shallow-sea: #98bbc2;
  --color-shallow-sea-50: #ddf3f7;
  --color-shallow-sea-100: #cfe7ec;
  --color-shallow-sea-200: #b6d2d8;
  --color-shallow-sea-300: #98bbc2;
  --color-shallow-sea-400: #7c9ea4;
  --color-shallow-sea-500: #63858b;
  --color-shallow-sea-600: #4c6c72;
  --color-shallow-sea-700: #3a575d;
  --color-shallow-sea-800: #2c454a;
  --color-shallow-sea-900: #21373b;
  --color-shallow-sea-950: #122225;
  --color-mountain-view: #354b37;
  --color-mountain-view-50: #ebfaec;
  --color-mountain-view-100: #e0f0e1;
  --color-mountain-view-200: #cadecc;
  --color-mountain-view-300: #b2c8b4;
  --color-mountain-view-400: #92aa94;
  --color-mountain-view-500: #778f78;
  --color-mountain-view-600: #5d745f;
  --color-mountain-view-700: #485e4a;
  --color-mountain-view-800: #354b37;
  --color-mountain-view-900: #29392b;
  --color-mountain-view-950: #192419;
  --color-camping-trip: #5e7762;
  --color-camping-trip-50: #ebfaed;
  --color-camping-trip-100: #e0f1e2;
  --color-camping-trip-200: #cbdfce;
  --color-camping-trip-300: #b3cab6;
  --color-camping-trip-400: #93ac96;
  --color-camping-trip-500: #77917b;
  --color-camping-trip-600: #5e7762;
  --color-camping-trip-700: #485f4c;
  --color-camping-trip-800: #374a3a;
  --color-camping-trip-900: #29392b;
  --color-camping-trip-950: #18241a;
}