Glacial Drift to Siren Color Palette

About this palette

Glacial Drift to Siren is a 5-color warm, vintage palette: #CBF7F2 (Glacial Drift), #79DBCB (Shimmering Blue), #B87F98 (Punched Pink), #A6486F (Our Little Secret), #6C2548 (Siren). It mixes white, turquoise, pink, red tones and feels warm overall. The strongest text pairing is #CBF7F2 on #6C2548 with a contrast ratio of 9.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glacial Drift	rgb(203, 247, 242)	hsl(173, 73%, 88%)
Shimmering Blue	rgb(121, 219, 203)	hsl(170, 58%, 67%)
Punched Pink	rgb(184, 127, 152)	hsl(334, 29%, 61%)
Our Little Secret	rgb(166, 72, 111)	hsl(335, 39%, 47%)
Siren	rgb(108, 37, 72)	hsl(330, 49%, 28%)

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.

Aa9.08:1 Very good#CBF7F2 on #6C2548
Aa9.08:1 Very good#6C2548 on #CBF7F2
Aa6.42:1 Good#79DBCB on #6C2548
Aa6.42:1 Good#6C2548 on #79DBCB
Aa4.80:1 Good#CBF7F2 on #A6486F
Aa4.80:1 Good#A6486F on #CBF7F2
Aa3.39:1 Poor#79DBCB on #A6486F
Aa3.39:1 Poor#A6486F on #79DBCB

Color blindness preview

CSS variables

/* Glacial Drift to Siren — https://swatchly.xyz/palette/cbf7f2-79dbcb-b87f98-a6486f-6c2548 */
:root {
  --glacial-drift: #cbf7f2;
  --shimmering-blue: #79dbcb;
  --punched-pink: #b87f98;
  --our-little-secret: #a6486f;
  --siren: #6c2548;
}

Tailwind CSS v4

/* Glacial Drift to Siren — https://swatchly.xyz/palette/cbf7f2-79dbcb-b87f98-a6486f-6c2548 */
@theme {
  --color-glacial-drift: #cbf7f2;
  --color-glacial-drift-50: #e5fcf9;
  --color-glacial-drift-100: #cbf7f2;
  --color-glacial-drift-200: #c1e0dc;
  --color-glacial-drift-300: #a6cac6;
  --color-glacial-drift-400: #83aba7;
  --color-glacial-drift-500: #67908c;
  --color-glacial-drift-600: #4d7571;
  --color-glacial-drift-700: #395d5a;
  --color-glacial-drift-800: #294946;
  --color-glacial-drift-900: #1d3836;
  --color-glacial-drift-950: #102321;
  --color-shimmering-blue: #79dbcb;
  --color-shimmering-blue-50: #e3fff9;
  --color-shimmering-blue-100: #c6fcf2;
  --color-shimmering-blue-200: #a9ecdf;
  --color-shimmering-blue-300: #79dbcb;
  --color-shimmering-blue-400: #5cb9aa;
  --color-shimmering-blue-500: #369c8e;
  --color-shimmering-blue-600: #088072;
  --color-shimmering-blue-700: #00655a;
  --color-shimmering-blue-800: #004f46;
  --color-shimmering-blue-900: #003c35;
  --color-shimmering-blue-950: #002621;
  --color-punched-pink: #b87f98;
  --color-punched-pink-50: #fff4f8;
  --color-punched-pink-100: #ffe9f2;
  --color-punched-pink-200: #fcd0e2;
  --color-punched-pink-300: #ebb9ce;
  --color-punched-pink-400: #d19ab1;
  --color-punched-pink-500: #b87f98;
  --color-punched-pink-600: #99637b;
  --color-punched-pink-700: #7d4b62;
  --color-punched-pink-800: #63384c;
  --color-punched-pink-900: #4d293a;
  --color-punched-pink-950: #311723;
  --color-our-little-secret: #a6486f;
  --color-our-little-secret-50: #fff1f5;
  --color-our-little-secret-100: #ffe3ec;
  --color-our-little-secret-200: #ffc6d9;
  --color-our-little-secret-300: #fca3c3;
  --color-our-little-secret-400: #e080a4;
  --color-our-little-secret-500: #c46389;
  --color-our-little-secret-600: #a6486f;
  --color-our-little-secret-700: #883458;
  --color-our-little-secret-800: #6e2445;
  --color-our-little-secret-900: #571835;
  --color-our-little-secret-950: #390c20;
  --color-siren: #6c2548;
  --color-siren-50: #fff1f6;
  --color-siren-100: #ffe2ed;
  --color-siren-200: #ffc4dc;
  --color-siren-300: #f1a8c6;
  --color-siren-400: #d486a7;
  --color-siren-500: #b86a8c;
  --color-siren-600: #9a5072;
  --color-siren-700: #7f3b5b;
  --color-siren-800: #6c2548;
  --color-siren-900: #511f37;
  --color-siren-950: #351122;
}