Gum Leaf to Glacial Drift color palette

AFCDB1Gum Leaf ECD0E7Sweet Dreams BCE3FFFrozen Landscape FDDABEPersian Melon CCF8E9Glacial Drift

About this palette

Gum Leaf to Glacial Drift is a 5-color pastel, light, cool palette: #AFCDB1 (Gum Leaf), #ECD0E7 (Sweet Dreams), #BCE3FF (Frozen Landscape), #FDDABE (Persian Melon), #CCF8E9 (Glacial Drift). It mixes green, pink, blue, orange, white tones and feels cool overall. The strongest text pairing is #AFCDB1 on #CCF8E9 with a contrast ratio of 1.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gum Leaf	rgb(175, 205, 177)	hsl(124, 23%, 75%)
Sweet Dreams	rgb(236, 208, 231)	hsl(311, 42%, 87%)
Frozen Landscape	rgb(188, 227, 255)	hsl(205, 100%, 87%)
Persian Melon	rgb(253, 218, 190)	hsl(27, 94%, 87%)
Glacial Drift	rgb(204, 248, 233)	hsl(160, 76%, 89%)

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

/* Gum Leaf to Glacial Drift — https://swatchly.xyz/palette/afcdb1-ecd0e7-bce3ff-fddabe-ccf8e9 */
:root {
  --gum-leaf: #afcdb1;
  --sweet-dreams: #ecd0e7;
  --frozen-landscape: #bce3ff;
  --persian-melon: #fddabe;
  --glacial-drift: #ccf8e9;
}

Tailwind CSS v4

/* Gum Leaf to Glacial Drift — https://swatchly.xyz/palette/afcdb1-ecd0e7-bce3ff-fddabe-ccf8e9 */
@theme {
  --color-gum-leaf: #afcdb1;
  --color-gum-leaf-50: #ebfcec;
  --color-gum-leaf-100: #e0f3e1;
  --color-gum-leaf-200: #cbe1cc;
  --color-gum-leaf-300: #afcdb1;
  --color-gum-leaf-400: #91ac92;
  --color-gum-leaf-500: #749076;
  --color-gum-leaf-600: #5a755c;
  --color-gum-leaf-700: #455d47;
  --color-gum-leaf-800: #344935;
  --color-gum-leaf-900: #263828;
  --color-gum-leaf-950: #162317;
  --color-sweet-dreams: #ecd0e7;
  --color-sweet-dreams-50: #fff2fd;
  --color-sweet-dreams-100: #f8e7f5;
  --color-sweet-dreams-200: #ecd0e7;
  --color-sweet-dreams-300: #d2bbce;
  --color-sweet-dreams-400: #b39aaf;
  --color-sweet-dreams-500: #987e93;
  --color-sweet-dreams-600: #7c6478;
  --color-sweet-dreams-700: #634e60;
  --color-sweet-dreams-800: #4e3b4b;
  --color-sweet-dreams-900: #3d2d3a;
  --color-sweet-dreams-950: #261b25;
  --color-frozen-landscape: #bce3ff;
  --color-frozen-landscape-50: #f3faff;
  --color-frozen-landscape-100: #e2f3ff;
  --color-frozen-landscape-200: #bce3ff;
  --color-frozen-landscape-300: #abcae1;
  --color-frozen-landscape-400: #87aac3;
  --color-frozen-landscape-500: #698ea7;
  --color-frozen-landscape-600: #4f728b;
  --color-frozen-landscape-700: #3a5a70;
  --color-frozen-landscape-800: #2a4659;
  --color-frozen-landscape-900: #1e3646;
  --color-frozen-landscape-950: #10212d;
  --color-persian-melon: #fddabe;
  --color-persian-melon-50: #fee9d8;
  --color-persian-melon-100: #fddabe;
  --color-persian-melon-200: #e5cab4;
  --color-persian-melon-300: #d2b49c;
  --color-persian-melon-400: #b6967c;
  --color-persian-melon-500: #9c7c62;
  --color-persian-melon-600: #81644b;
  --color-persian-melon-700: #6a4f39;
  --color-persian-melon-800: #543d29;
  --color-persian-melon-900: #422e1d;
  --color-persian-melon-950: #2a1c10;
  --color-glacial-drift: #ccf8e9;
  --color-glacial-drift-50: #e5fdf4;
  --color-glacial-drift-100: #ccf8e9;
  --color-glacial-drift-200: #c1e1d6;
  --color-glacial-drift-300: #a7cbbf;
  --color-glacial-drift-400: #84ac9f;
  --color-glacial-drift-500: #689183;
  --color-glacial-drift-600: #4e7569;
  --color-glacial-drift-700: #3a5e53;
  --color-glacial-drift-800: #2a4a40;
  --color-glacial-drift-900: #1e3931;
  --color-glacial-drift-950: #10241e;
}