Tropical Freeze to Anise Biscotti Color Palette

About this palette

Tropical Freeze to Anise Biscotti is a 4-color pastel, light, cool palette: #9FDDC7 (Tropical Freeze), #B9E6F6 (Breaking the Ice), #E5FFEA (Snow White), #E3D8AF (Anise Biscotti). It mixes turquoise, blue, white, yellow tones and feels cool overall. The strongest text pairing is #9FDDC7 on #E5FFEA with a contrast ratio of 1.45:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Freeze	rgb(159, 221, 199)	hsl(159, 48%, 75%)
Breaking the Ice	rgb(185, 230, 246)	hsl(196, 77%, 85%)
Snow White	rgb(229, 255, 234)	hsl(132, 100%, 95%)
Anise Biscotti	rgb(227, 216, 175)	hsl(47, 48%, 79%)

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

/* Tropical Freeze to Anise Biscotti — https://swatchly.xyz/palette/9fddc7-b9e6f6-e5ffea-e3d8af */
:root {
  --tropical-freeze: #9fddc7;
  --breaking-the-ice: #b9e6f6;
  --snow-white: #e5ffea;
  --anise-biscotti: #e3d8af;
}

Tailwind CSS v4

/* Tropical Freeze to Anise Biscotti — https://swatchly.xyz/palette/9fddc7-b9e6f6-e5ffea-e3d8af */
@theme {
  --color-tropical-freeze: #9fddc7;
  --color-tropical-freeze-50: #d4f8ea;
  --color-tropical-freeze-100: #c5eede;
  --color-tropical-freeze-200: #9fddc7;
  --color-tropical-freeze-300: #91c6b3;
  --color-tropical-freeze-400: #6fa995;
  --color-tropical-freeze-500: #538f7c;
  --color-tropical-freeze-600: #3b7663;
  --color-tropical-freeze-700: #295f4f;
  --color-tropical-freeze-800: #1b4c3e;
  --color-tropical-freeze-900: #113b2f;
  --color-tropical-freeze-950: #06251c;
  --color-breaking-the-ice: #b9e6f6;
  --color-breaking-the-ice-50: #f1fbff;
  --color-breaking-the-ice-100: #dbf5ff;
  --color-breaking-the-ice-200: #b9e6f6;
  --color-breaking-the-ice-300: #a8cdda;
  --color-breaking-the-ice-400: #84adbb;
  --color-breaking-the-ice-500: #66909f;
  --color-breaking-the-ice-600: #4b7583;
  --color-breaking-the-ice-700: #375c69;
  --color-breaking-the-ice-800: #264853;
  --color-breaking-the-ice-900: #1b3741;
  --color-breaking-the-ice-950: #0e2229;
  --color-snow-white: #e5ffea;
  --color-snow-white-50: #e5ffea;
  --color-snow-white-100: #e2f2e5;
  --color-snow-white-200: #ccdecf;
  --color-snow-white-300: #b3c8b7;
  --color-snow-white-400: #92a996;
  --color-snow-white-500: #768d7b;
  --color-snow-white-600: #5c7261;
  --color-snow-white-700: #475b4b;
  --color-snow-white-800: #36483a;
  --color-snow-white-900: #28372b;
  --color-snow-white-950: #18221a;
  --color-anise-biscotti: #e3d8af;
  --color-anise-biscotti-50: #fcf6df;
  --color-anise-biscotti-100: #f2ecd2;
  --color-anise-biscotti-200: #e3d8af;
  --color-anise-biscotti-300: #cac19f;
  --color-anise-biscotti-400: #aca27c;
  --color-anise-biscotti-500: #918660;
  --color-anise-biscotti-600: #766c47;
  --color-anise-biscotti-700: #5e5534;
  --color-anise-biscotti-800: #4a4225;
  --color-anise-biscotti-900: #393319;
  --color-anise-biscotti-950: #241f0d;
}