Night Snow to Avocado Stone color palette

B4D0FENight Snow 82C4CAWavelet D1737CMexican Chile A14953Rose Laffy Taffy 4B3916Avocado Stone

About this palette

Night Snow to Avocado Stone is a 5-color warm, vintage palette: #B4D0FE (Night Snow), #82C4CA (Wavelet), #D1737C (Mexican Chile), #A14953 (Rose Laffy Taffy), #4B3916 (Avocado Stone). It mixes blue, turquoise, red, brown tones and feels warm overall. The strongest text pairing is #B4D0FE on #4B3916 with a contrast ratio of 7.06:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Snow	rgb(180, 208, 254)	hsl(217, 97%, 85%)
Wavelet	rgb(130, 196, 202)	hsl(185, 40%, 65%)
Mexican Chile	rgb(209, 115, 124)	hsl(354, 51%, 64%)
Rose Laffy Taffy	rgb(161, 73, 83)	hsl(353, 38%, 46%)
Avocado Stone	rgb(75, 57, 22)	hsl(40, 55%, 19%)

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.

Aa7.06:1 Very good#B4D0FE on #4B3916
Aa7.06:1 Very good#4B3916 on #B4D0FE
Aa5.64:1 Good#82C4CA on #4B3916
Aa5.64:1 Good#4B3916 on #82C4CA
Aa3.73:1 Poor#B4D0FE on #A14953
Aa3.73:1 Poor#A14953 on #B4D0FE
Aa3.40:1 Poor#D1737C on #4B3916
Aa3.40:1 Poor#4B3916 on #D1737C

Color blindness preview

CSS variables

/* Night Snow to Avocado Stone — https://swatchly.xyz/palette/b4d0fe-82c4ca-d1737c-a14953-4b3916 */
:root {
  --night-snow: #b4d0fe;
  --wavelet: #82c4ca;
  --mexican-chile: #d1737c;
  --rose-laffy-taffy: #a14953;
  --avocado-stone: #4b3916;
}

Tailwind CSS v4

/* Night Snow to Avocado Stone — https://swatchly.xyz/palette/b4d0fe-82c4ca-d1737c-a14953-4b3916 */
@theme {
  --color-night-snow: #b4d0fe;
  --color-night-snow-50: #e6f0ff;
  --color-night-snow-100: #d5e5ff;
  --color-night-snow-200: #b4d0fe;
  --color-night-snow-300: #a3bbe3;
  --color-night-snow-400: #839dc7;
  --color-night-snow-500: #6983ad;
  --color-night-snow-600: #526a92;
  --color-night-snow-700: #3f5478;
  --color-night-snow-800: #2f4362;
  --color-night-snow-900: #23334e;
  --color-night-snow-950: #141f33;
  --color-wavelet: #82c4ca;
  --color-wavelet-50: #d2f8fc;
  --color-wavelet-100: #c2eef1;
  --color-wavelet-200: #a7dade;
  --color-wavelet-300: #82c4ca;
  --color-wavelet-400: #66a6ab;
  --color-wavelet-500: #4a8c92;
  --color-wavelet-600: #327278;
  --color-wavelet-700: #205c61;
  --color-wavelet-800: #124a4e;
  --color-wavelet-900: #083a3e;
  --color-wavelet-950: #022427;
  --color-mexican-chile: #d1737c;
  --color-mexican-chile-50: #fff5f5;
  --color-mexican-chile-100: #ffeaeb;
  --color-mexican-chile-200: #ffd1d4;
  --color-mexican-chile-300: #ffb2b8;
  --color-mexican-chile-400: #e98f97;
  --color-mexican-chile-500: #d1737c;
  --color-mexican-chile-600: #b05660;
  --color-mexican-chile-700: #913f49;
  --color-mexican-chile-800: #752c36;
  --color-mexican-chile-900: #5c1e27;
  --color-mexican-chile-950: #3c0f16;
  --color-rose-laffy-taffy: #a14953;
  --color-rose-laffy-taffy-50: #fff1f2;
  --color-rose-laffy-taffy-100: #ffe3e4;
  --color-rose-laffy-taffy-200: #ffc5c8;
  --color-rose-laffy-taffy-300: #f9a5aa;
  --color-rose-laffy-taffy-400: #dc8189;
  --color-rose-laffy-taffy-500: #bf646d;
  --color-rose-laffy-taffy-600: #a14953;
  --color-rose-laffy-taffy-700: #843640;
  --color-rose-laffy-taffy-800: #6b2730;
  --color-rose-laffy-taffy-900: #551b23;
  --color-rose-laffy-taffy-950: #380e14;
  --color-avocado-stone: #4b3916;
  --color-avocado-stone-50: #fff4e0;
  --color-avocado-stone-100: #f7e9d2;
  --color-avocado-stone-200: #e6d5b9;
  --color-avocado-stone-300: #d0bd9d;
  --color-avocado-stone-400: #b09c79;
  --color-avocado-stone-500: #94805c;
  --color-avocado-stone-600: #776442;
  --color-avocado-stone-700: #5e4d2e;
  --color-avocado-stone-800: #4b3916;
  --color-avocado-stone-900: #382c16;
  --color-avocado-stone-950: #231a0a;
}