Broad Daylight to Creamy Vanilla Color Palette

About this palette

Broad Daylight to Creamy Vanilla is a 4-color pastel, light palette: #C5DBFF (Broad Daylight), #F7B2AE (Peach Bud), #AAE2D3 (Ice Cube), #F4E7BF (Creamy Vanilla). It mixes blue, pink, turquoise, yellow tones and feels balanced overall. The strongest text pairing is #F7B2AE on #F4E7BF with a contrast ratio of 1.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(197, 219, 255)	hsl(217, 100%, 89%)
Peach Bud	rgb(247, 178, 174)	hsl(3, 82%, 83%)
Ice Cube	rgb(170, 226, 211)	hsl(164, 49%, 78%)
Creamy Vanilla	rgb(244, 231, 191)	hsl(45, 71%, 85%)

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 Creamy Vanilla — https://swatchly.xyz/palette/c5dbff-f7b2ae-aae2d3-f4e7bf */
:root {
  --broad-daylight: #c5dbff;
  --peach-bud: #f7b2ae;
  --ice-cube: #aae2d3;
  --creamy-vanilla: #f4e7bf;
}

Tailwind CSS v4

/* Broad Daylight to Creamy Vanilla — https://swatchly.xyz/palette/c5dbff-f7b2ae-aae2d3-f4e7bf */
@theme {
  --color-broad-daylight: #c5dbff;
  --color-broad-daylight-50: #f2f7ff;
  --color-broad-daylight-100: #e3eeff;
  --color-broad-daylight-200: #c5dbff;
  --color-broad-daylight-300: #b2c4e2;
  --color-broad-daylight-400: #90a4c5;
  --color-broad-daylight-500: #7488a9;
  --color-broad-daylight-600: #5a6d8c;
  --color-broad-daylight-700: #455672;
  --color-broad-daylight-800: #34435b;
  --color-broad-daylight-900: #273348;
  --color-broad-daylight-950: #161f2e;
  --color-peach-bud: #f7b2ae;
  --color-peach-bud-50: #fff5f5;
  --color-peach-bud-100: #ffe9e7;
  --color-peach-bud-200: #ffcfcb;
  --color-peach-bud-300: #f7b2ae;
  --color-peach-bud-400: #d2938f;
  --color-peach-bud-500: #b67673;
  --color-peach-bud-600: #985b58;
  --color-peach-bud-700: #7c4543;
  --color-peach-bud-800: #633332;
  --color-peach-bud-900: #4d2524;
  --color-peach-bud-950: #321615;
  --color-ice-cube: #aae2d3;
  --color-ice-cube-50: #dcfbf2;
  --color-ice-cube-100: #cef1e8;
  --color-ice-cube-200: #aae2d3;
  --color-ice-cube-300: #9bcabd;
  --color-ice-cube-400: #78ac9e;
  --color-ice-cube-500: #5b9184;
  --color-ice-cube-600: #42766a;
  --color-ice-cube-700: #2f5f54;
  --color-ice-cube-800: #204b42;
  --color-ice-cube-900: #153a32;
  --color-ice-cube-950: #0a251f;
  --color-creamy-vanilla: #f4e7bf;
  --color-creamy-vanilla-50: #f9f2db;
  --color-creamy-vanilla-100: #f4e7bf;
  --color-creamy-vanilla-200: #ded4b6;
  --color-creamy-vanilla-300: #c9be9d;
  --color-creamy-vanilla-400: #ab9f7b;
  --color-creamy-vanilla-500: #908460;
  --color-creamy-vanilla-600: #766b47;
  --color-creamy-vanilla-700: #5f5534;
  --color-creamy-vanilla-800: #4b4225;
  --color-creamy-vanilla-900: #3a321a;
  --color-creamy-vanilla-950: #241f0d;
}