Cold Blue to Hint of Mint color palette

86D5D5Cold Blue ECCBE3Sweet Dreams B9E8C5Mint-o-licious C8DEFFIcy Plains DFF7D3Hint of Mint

About this palette

Cold Blue to Hint of Mint is a 5-color pastel, light, cool palette: #86D5D5 (Cold Blue), #ECCBE3 (Sweet Dreams), #B9E8C5 (Mint-o-licious), #C8DEFF (Icy Plains), #DFF7D3 (Hint of Mint). It mixes turquoise, pink, green, blue, white tones and feels cool overall. The strongest text pairing is #86D5D5 on #DFF7D3 with a contrast ratio of 1.47:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Blue	rgb(134, 213, 213)	hsl(180, 48%, 68%)
Sweet Dreams	rgb(236, 203, 227)	hsl(316, 46%, 86%)
Mint-o-licious	rgb(185, 232, 197)	hsl(135, 51%, 82%)
Icy Plains	rgb(200, 222, 255)	hsl(216, 100%, 89%)
Hint of Mint	rgb(223, 247, 211)	hsl(100, 69%, 90%)

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

/* Cold Blue to Hint of Mint — https://swatchly.xyz/palette/86d5d5-eccbe3-b9e8c5-c8deff-dff7d3 */
:root {
  --cold-blue: #86d5d5;
  --sweet-dreams: #eccbe3;
  --mint-o-licious: #b9e8c5;
  --icy-plains: #c8deff;
  --hint-of-mint: #dff7d3;
}

Tailwind CSS v4

/* Cold Blue to Hint of Mint — https://swatchly.xyz/palette/86d5d5-eccbe3-b9e8c5-c8deff-dff7d3 */
@theme {
  --color-cold-blue: #86d5d5;
  --color-cold-blue-50: #deffff;
  --color-cold-blue-100: #cbf8f8;
  --color-cold-blue-200: #b0e7e7;
  --color-cold-blue-300: #86d5d5;
  --color-cold-blue-400: #69b3b4;
  --color-cold-blue-500: #489798;
  --color-cold-blue-600: #2a7b7c;
  --color-cold-blue-700: #116363;
  --color-cold-blue-800: #004d4e;
  --color-cold-blue-900: #003b3c;
  --color-cold-blue-950: #002526;
  --color-sweet-dreams: #eccbe3;
  --color-sweet-dreams-50: #ffeffa;
  --color-sweet-dreams-100: #f8e3f2;
  --color-sweet-dreams-200: #eccbe3;
  --color-sweet-dreams-300: #d2b6cb;
  --color-sweet-dreams-400: #b496ac;
  --color-sweet-dreams-500: #997b91;
  --color-sweet-dreams-600: #7e6176;
  --color-sweet-dreams-700: #654c5f;
  --color-sweet-dreams-800: #503a4b;
  --color-sweet-dreams-900: #3f2c3a;
  --color-sweet-dreams-950: #281a24;
  --color-mint-o-licious: #b9e8c5;
  --color-mint-o-licious-50: #e6ffec;
  --color-mint-o-licious-100: #daf6e1;
  --color-mint-o-licious-200: #b9e8c5;
  --color-mint-o-licious-300: #a8cfb2;
  --color-mint-o-licious-400: #85b090;
  --color-mint-o-licious-500: #689474;
  --color-mint-o-licious-600: #4e785a;
  --color-mint-o-licious-700: #396045;
  --color-mint-o-licious-800: #294b33;
  --color-mint-o-licious-900: #1d3a26;
  --color-mint-o-licious-950: #0f2516;
  --color-icy-plains: #c8deff;
  --color-icy-plains-50: #f5f9ff;
  --color-icy-plains-100: #e6f0ff;
  --color-icy-plains-200: #c8deff;
  --color-icy-plains-300: #b4c6e1;
  --color-icy-plains-400: #92a6c4;
  --color-icy-plains-500: #768aa8;
  --color-icy-plains-600: #5b6e8b;
  --color-icy-plains-700: #465771;
  --color-icy-plains-800: #344359;
  --color-icy-plains-900: #273346;
  --color-icy-plains-950: #17202d;
  --color-hint-of-mint: #dff7d3;
  --color-hint-of-mint-50: #f0fce9;
  --color-hint-of-mint-100: #dff7d3;
  --color-hint-of-mint-200: #cfe0c7;
  --color-hint-of-mint-300: #b6caad;
  --color-hint-of-mint-400: #95ab8a;
  --color-hint-of-mint-500: #798f6e;
  --color-hint-of-mint-600: #5f7354;
  --color-hint-of-mint-700: #495c40;
  --color-hint-of-mint-800: #38482f;
  --color-hint-of-mint-900: #2a3823;
  --color-hint-of-mint-950: #192314;
}