Frozen Landscape to Elite Teal Color Palette

About this palette

Frozen Landscape to Elite Teal is a 5-color cool, gradient palette: #B5E5FF (Frozen Landscape), #96BBFF (Pastel Blue), #0087B2 (Corfu Waters), #005C5F (Mosque), #003636 (Elite Teal). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #B5E5FF on #003636 with a contrast ratio of 9.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frozen Landscape	rgb(181, 229, 255)	hsl(201, 100%, 85%)
Pastel Blue	rgb(150, 187, 255)	hsl(219, 100%, 79%)
Corfu Waters	rgb(0, 135, 178)	hsl(194, 100%, 35%)
Mosque	rgb(0, 92, 95)	hsl(182, 100%, 19%)
Elite Teal	rgb(0, 54, 54)	hsl(180, 100%, 11%)

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.88:1 Very good#B5E5FF on #003636
Aa9.88:1 Very good#003636 on #B5E5FF
Aa6.86:1 Good#96BBFF on #003636
Aa6.86:1 Good#003636 on #96BBFF
Aa5.79:1 Good#B5E5FF on #005C5F
Aa5.79:1 Good#005C5F on #B5E5FF
Aa4.02:1 Poor#96BBFF on #005C5F
Aa4.02:1 Poor#005C5F on #96BBFF

Color blindness preview

CSS variables

/* Frozen Landscape to Elite Teal — https://swatchly.xyz/palette/b5e5ff-96bbff-0087b2-005c5f-003636 */
:root {
  --frozen-landscape: #b5e5ff;
  --pastel-blue: #96bbff;
  --corfu-waters: #0087b2;
  --mosque: #005c5f;
  --elite-teal: #003636;
}

Tailwind CSS v4

/* Frozen Landscape to Elite Teal — https://swatchly.xyz/palette/b5e5ff-96bbff-0087b2-005c5f-003636 */
@theme {
  --color-frozen-landscape: #b5e5ff;
  --color-frozen-landscape-50: #f2faff;
  --color-frozen-landscape-100: #dff4ff;
  --color-frozen-landscape-200: #b5e5ff;
  --color-frozen-landscape-300: #a5cce1;
  --color-frozen-landscape-400: #80acc4;
  --color-frozen-landscape-500: #6290a7;
  --color-frozen-landscape-600: #48748b;
  --color-frozen-landscape-700: #335c70;
  --color-frozen-landscape-800: #234759;
  --color-frozen-landscape-900: #183746;
  --color-frozen-landscape-950: #0c222d;
  --color-pastel-blue: #96bbff;
  --color-pastel-blue-50: #ebf2ff;
  --color-pastel-blue-100: #dbe8ff;
  --color-pastel-blue-200: #bbd3ff;
  --color-pastel-blue-300: #96bbff;
  --color-pastel-blue-400: #7a9cdc;
  --color-pastel-blue-500: #5f82c2;
  --color-pastel-blue-600: #4868a4;
  --color-pastel-blue-700: #355289;
  --color-pastel-blue-800: #274070;
  --color-pastel-blue-900: #1c315a;
  --color-pastel-blue-950: #0f1e3c;
  --color-corfu-waters: #0087b2;
  --color-corfu-waters-50: #e5f6ff;
  --color-corfu-waters-100: #caedff;
  --color-corfu-waters-200: #95ddff;
  --color-corfu-waters-300: #6dc6ee;
  --color-corfu-waters-400: #3ca5d0;
  --color-corfu-waters-500: #0087b2;
  --color-corfu-waters-600: #006d90;
  --color-corfu-waters-700: #005673;
  --color-corfu-waters-800: #00445c;
  --color-corfu-waters-900: #003548;
  --color-corfu-waters-950: #00222f;
  --color-mosque: #005c5f;
  --color-mosque-50: #d7feff;
  --color-mosque-100: #c9f5f6;
  --color-mosque-200: #ade2e4;
  --color-mosque-300: #8eccce;
  --color-mosque-400: #66acaf;
  --color-mosque-500: #469093;
  --color-mosque-600: #2a7477;
  --color-mosque-700: #005c5f;
  --color-mosque-800: #05484a;
  --color-mosque-900: #003739;
  --color-mosque-950: #002324;
  --color-elite-teal: #003636;
  --color-elite-teal-50: #e0fcfb;
  --color-elite-teal-100: #d4f2f2;
  --color-elite-teal-200: #bce0df;
  --color-elite-teal-300: #a1cac9;
  --color-elite-teal-400: #7cabaa;
  --color-elite-teal-500: #5f8e8e;
  --color-elite-teal-600: #457272;
  --color-elite-teal-700: #305a5a;
  --color-elite-teal-800: #214545;
  --color-elite-teal-900: #003636;
  --color-elite-teal-950: #0a2020;
}