Friendly Frost to Mellow Mint Color Palette

About this palette

Friendly Frost to Mellow Mint is a 5-color pastel, light, cool palette: #BBFAFD (Friendly Frost), #DFC2AB (Larb Gai), #E5CCE2 (Sweet Dreams), #ADDFEA (Lady-In-Waiting), #E1E9B8 (Mellow Mint). It mixes turquoise, orange, pink, green tones and feels cool overall. The strongest text pairing is #BBFAFD on #DFC2AB with a contrast ratio of 1.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Friendly Frost	rgb(187, 250, 253)	hsl(183, 94%, 86%)
Larb Gai	rgb(223, 194, 171)	hsl(27, 45%, 77%)
Sweet Dreams	rgb(229, 204, 226)	hsl(307, 32%, 85%)
Lady-In-Waiting	rgb(173, 223, 234)	hsl(191, 59%, 80%)
Mellow Mint	rgb(225, 233, 184)	hsl(70, 53%, 82%)

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

/* Friendly Frost to Mellow Mint — https://swatchly.xyz/palette/bbfafd-dfc2ab-e5cce2-addfea-e1e9b8 */
:root {
  --friendly-frost: #bbfafd;
  --larb-gai: #dfc2ab;
  --sweet-dreams: #e5cce2;
  --lady-in-waiting: #addfea;
  --mellow-mint: #e1e9b8;
}

Tailwind CSS v4

/* Friendly Frost to Mellow Mint — https://swatchly.xyz/palette/bbfafd-dfc2ab-e5cce2-addfea-e1e9b8 */
@theme {
  --color-friendly-frost: #bbfafd;
  --color-friendly-frost-50: #ddfeff;
  --color-friendly-frost-100: #bbfafd;
  --color-friendly-frost-200: #b6e2e4;
  --color-friendly-frost-300: #99cdcf;
  --color-friendly-frost-400: #74aeb1;
  --color-friendly-frost-500: #569295;
  --color-friendly-frost-600: #3c777a;
  --color-friendly-frost-700: #275f62;
  --color-friendly-frost-800: #184b4d;
  --color-friendly-frost-900: #0e3a3c;
  --color-friendly-frost-950: #052426;
  --color-larb-gai: #dfc2ab;
  --color-larb-gai-50: #fff7f1;
  --color-larb-gai-100: #feeddf;
  --color-larb-gai-200: #eed9c9;
  --color-larb-gai-300: #dfc2ab;
  --color-larb-gai-400: #bca28d;
  --color-larb-gai-500: #a0856f;
  --color-larb-gai-600: #836955;
  --color-larb-gai-700: #69523f;
  --color-larb-gai-800: #533f2e;
  --color-larb-gai-900: #402f21;
  --color-larb-gai-950: #281c12;
  --color-sweet-dreams: #e5cce2;
  --color-sweet-dreams-50: #fdeefb;
  --color-sweet-dreams-100: #f3e3f1;
  --color-sweet-dreams-200: #e5cce2;
  --color-sweet-dreams-300: #ccb7ca;
  --color-sweet-dreams-400: #ae98ac;
  --color-sweet-dreams-500: #937d91;
  --color-sweet-dreams-600: #796376;
  --color-sweet-dreams-700: #614e5f;
  --color-sweet-dreams-800: #4d3c4b;
  --color-sweet-dreams-900: #3c2d3a;
  --color-sweet-dreams-950: #261b25;
  --color-lady-in-waiting: #addfea;
  --color-lady-in-waiting-50: #dff9ff;
  --color-lady-in-waiting-100: #d0f0f7;
  --color-lady-in-waiting-200: #addfea;
  --color-lady-in-waiting-300: #9dc7d1;
  --color-lady-in-waiting-400: #7aa9b3;
  --color-lady-in-waiting-500: #5e8e98;
  --color-lady-in-waiting-600: #45737d;
  --color-lady-in-waiting-700: #325c65;
  --color-lady-in-waiting-800: #234951;
  --color-lady-in-waiting-900: #18383f;
  --color-lady-in-waiting-950: #0b2328;
  --color-mellow-mint: #e1e9b8;
  --color-mellow-mint-50: #edf2d5;
  --color-mellow-mint-100: #e1e9b8;
  --color-mellow-mint-200: #cfd5b0;
  --color-mellow-mint-300: #bac197;
  --color-mellow-mint-400: #9ca376;
  --color-mellow-mint-500: #82895b;
  --color-mellow-mint-600: #696f44;
  --color-mellow-mint-700: #545931;
  --color-mellow-mint-800: #414623;
  --color-mellow-mint-900: #323618;
  --color-mellow-mint-950: #1f210c;
}