June Ivy to Melting Glacier Color Palette

About this palette

June Ivy to Melting Glacier is a 5-color muted, cool palette: #3B685C (June Ivy), #244144 (Emerald Forest), #9DCFD6 (Wave), #6A8A9B (Horizon), #E2FBF6 (Melting Glacier). It mixes turquoise, blue, white tones and feels cool overall. The strongest text pairing is #244144 on #E2FBF6 with a contrast ratio of 10.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
June Ivy	rgb(59, 104, 92)	hsl(164, 28%, 32%)
Emerald Forest	rgb(36, 65, 68)	hsl(186, 31%, 20%)
Wave	rgb(157, 207, 214)	hsl(187, 41%, 73%)
Horizon	rgb(106, 138, 155)	hsl(201, 20%, 51%)
Melting Glacier	rgb(226, 251, 246)	hsl(168, 76%, 94%)

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.11:1 Very good#244144 on #E2FBF6
Aa10.11:1 Very good#E2FBF6 on #244144
Aa6.44:1 Good#244144 on #9DCFD6
Aa6.44:1 Good#9DCFD6 on #244144
Aa5.83:1 Good#3B685C on #E2FBF6
Aa5.83:1 Good#E2FBF6 on #3B685C
Aa3.71:1 Poor#3B685C on #9DCFD6
Aa3.71:1 Poor#9DCFD6 on #3B685C

Color blindness preview

CSS variables

/* June Ivy to Melting Glacier — https://swatchly.xyz/palette/3b685c-244144-9dcfd6-6a8a9b-e2fbf6 */
:root {
  --june-ivy: #3b685c;
  --emerald-forest: #244144;
  --wave: #9dcfd6;
  --horizon: #6a8a9b;
  --melting-glacier: #e2fbf6;
}

Tailwind CSS v4

/* June Ivy to Melting Glacier — https://swatchly.xyz/palette/3b685c-244144-9dcfd6-6a8a9b-e2fbf6 */
@theme {
  --color-june-ivy: #3b685c;
  --color-june-ivy-50: #e2fcf4;
  --color-june-ivy-100: #d5f3ea;
  --color-june-ivy-200: #bfe2d8;
  --color-june-ivy-300: #a7cec2;
  --color-june-ivy-400: #85b1a4;
  --color-june-ivy-500: #6a978a;
  --color-june-ivy-600: #517e71;
  --color-june-ivy-700: #3b685c;
  --color-june-ivy-800: #2c5248;
  --color-june-ivy-900: #1e3f37;
  --color-june-ivy-950: #102822;
  --color-emerald-forest: #244144;
  --color-emerald-forest-50: #e7f9fb;
  --color-emerald-forest-100: #dbf0f2;
  --color-emerald-forest-200: #c5dddf;
  --color-emerald-forest-300: #aac6c9;
  --color-emerald-forest-400: #87a5a9;
  --color-emerald-forest-500: #6a898c;
  --color-emerald-forest-600: #506d70;
  --color-emerald-forest-700: #3a5557;
  --color-emerald-forest-800: #244144;
  --color-emerald-forest-900: #1e3133;
  --color-emerald-forest-950: #111e1f;
  --color-wave: #9dcfd6;
  --color-wave-50: #e6fcff;
  --color-wave-100: #d6f4f9;
  --color-wave-200: #bfe2e7;
  --color-wave-300: #9dcfd6;
  --color-wave-400: #80aeb4;
  --color-wave-500: #629299;
  --color-wave-600: #47767d;
  --color-wave-700: #335e64;
  --color-wave-800: #234a4f;
  --color-wave-900: #18393d;
  --color-wave-950: #0b2326;
  --color-horizon: #6a8a9b;
  --color-horizon-50: #eaf7ff;
  --color-horizon-100: #d9eefa;
  --color-horizon-200: #c2dbe9;
  --color-horizon-300: #a8c5d4;
  --color-horizon-400: #86a6b7;
  --color-horizon-500: #6a8a9b;
  --color-horizon-600: #517080;
  --color-horizon-700: #3d5967;
  --color-horizon-800: #2d4552;
  --color-horizon-900: #213640;
  --color-horizon-950: #122129;
  --color-melting-glacier: #e2fbf6;
  --color-melting-glacier-50: #e2fbf6;
  --color-melting-glacier-100: #dfefec;
  --color-melting-glacier-200: #cadcd8;
  --color-melting-glacier-300: #b1c6c2;
  --color-melting-glacier-400: #91a7a3;
  --color-melting-glacier-500: #758c87;
  --color-melting-glacier-600: #5b716d;
  --color-melting-glacier-700: #465a56;
  --color-melting-glacier-800: #354643;
  --color-melting-glacier-900: #283634;
  --color-melting-glacier-950: #172220;
}