Broad Daylight to Escargot Color Palette

About this palette

Broad Daylight to Escargot is a 4-color pastel, light, warm palette: #BDDFFF (Broad Daylight), #F7D6BA (Sablé), #D8B4BB (Mauvelous), #FFF1D5 (Escargot). It mixes blue, orange, pink, white tones and feels warm overall. The strongest text pairing is #D8B4BB on #FFF1D5 with a contrast ratio of 1.68:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(189, 223, 255)	hsl(209, 100%, 87%)
Sablé	rgb(247, 214, 186)	hsl(28, 79%, 85%)
Mauvelous	rgb(216, 180, 187)	hsl(348, 32%, 78%)
Escargot	rgb(255, 241, 213)	hsl(40, 100%, 92%)

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

/* Broad Daylight to Escargot — https://swatchly.xyz/palette/bddfff-f7d6ba-d8b4bb-fff1d5 */
:root {
  --broad-daylight: #bddfff;
  --sabl: #f7d6ba;
  --mauvelous: #d8b4bb;
  --escargot: #fff1d5;
}

Tailwind CSS v4

/* Broad Daylight to Escargot — https://swatchly.xyz/palette/bddfff-f7d6ba-d8b4bb-fff1d5 */
@theme {
  --color-broad-daylight: #bddfff;
  --color-broad-daylight-50: #f1f8ff;
  --color-broad-daylight-100: #e0f0ff;
  --color-broad-daylight-200: #bddfff;
  --color-broad-daylight-300: #abc7e2;
  --color-broad-daylight-400: #88a7c4;
  --color-broad-daylight-500: #6c8ba9;
  --color-broad-daylight-600: #52708c;
  --color-broad-daylight-700: #3d5972;
  --color-broad-daylight-800: #2d455b;
  --color-broad-daylight-900: #203547;
  --color-broad-daylight-950: #12212e;
  --color-sabl: #f7d6ba;
  --color-sabl-50: #fff7f1;
  --color-sabl-100: #ffecdc;
  --color-sabl-200: #f7d6ba;
  --color-sabl-300: #dbc0a9;
  --color-sabl-400: #bc9f85;
  --color-sabl-500: #a08268;
  --color-sabl-600: #83674e;
  --color-sabl-700: #6a503a;
  --color-sabl-800: #533d29;
  --color-sabl-900: #412e1e;
  --color-sabl-950: #2a1c10;
  --color-mauvelous: #d8b4bb;
  --color-mauvelous-50: #fff0f2;
  --color-mauvelous-100: #fbe3e7;
  --color-mauvelous-200: #e9cdd3;
  --color-mauvelous-300: #d8b4bb;
  --color-mauvelous-400: #b7969c;
  --color-mauvelous-500: #9c7b81;
  --color-mauvelous-600: #816167;
  --color-mauvelous-700: #684c52;
  --color-mauvelous-800: #533a3f;
  --color-mauvelous-900: #412c31;
  --color-mauvelous-950: #291a1e;
  --color-escargot: #fff1d5;
  --color-escargot-50: #fff1d5;
  --color-escargot-100: #f1e8d7;
  --color-escargot-200: #dfd5c0;
  --color-escargot-300: #cabea7;
  --color-escargot-400: #ac9f86;
  --color-escargot-500: #91846b;
  --color-escargot-600: #766a52;
  --color-escargot-700: #5f543e;
  --color-escargot-800: #4b412e;
  --color-escargot-900: #3a3221;
  --color-escargot-950: #241e13;
}