Endless Horizon to Cream Puff color palette

B0D7F2Endless Horizon BCBAE8Viking Diva EEFFE0Milk Foam DCE8B3Mellow Mint F9B994Cream Puff

About this palette

Endless Horizon to Cream Puff is a 5-color pastel, light, cool palette: #B0D7F2 (Endless Horizon), #BCBAE8 (Viking Diva), #EEFFE0 (Milk Foam), #DCE8B3 (Mellow Mint), #F9B994 (Cream Puff). It mixes blue, purple, white, green, orange tones and feels cool overall. The strongest text pairing is #BCBAE8 on #EEFFE0 with a contrast ratio of 1.77:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Endless Horizon	rgb(176, 215, 242)	hsl(205, 72%, 82%)
Viking Diva	rgb(188, 186, 232)	hsl(243, 50%, 82%)
Milk Foam	rgb(238, 255, 224)	hsl(93, 100%, 94%)
Mellow Mint	rgb(220, 232, 179)	hsl(74, 54%, 81%)
Cream Puff	rgb(249, 185, 148)	hsl(22, 89%, 78%)

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

/* Endless Horizon to Cream Puff — https://swatchly.xyz/palette/b0d7f2-bcbae8-eeffe0-dce8b3-f9b994 */
:root {
  --endless-horizon: #b0d7f2;
  --viking-diva: #bcbae8;
  --milk-foam: #eeffe0;
  --mellow-mint: #dce8b3;
  --cream-puff: #f9b994;
}

Tailwind CSS v4

/* Endless Horizon to Cream Puff — https://swatchly.xyz/palette/b0d7f2-bcbae8-eeffe0-dce8b3-f9b994 */
@theme {
  --color-endless-horizon: #b0d7f2;
  --color-endless-horizon-50: #e3f3ff;
  --color-endless-horizon-100: #d0eafc;
  --color-endless-horizon-200: #b0d7f2;
  --color-endless-horizon-300: #9fc1d8;
  --color-endless-horizon-400: #7fa3bc;
  --color-endless-horizon-500: #6488a1;
  --color-endless-horizon-600: #4c6f86;
  --color-endless-horizon-700: #39596e;
  --color-endless-horizon-800: #2a4659;
  --color-endless-horizon-900: #1e3646;
  --color-endless-horizon-950: #10212d;
  --color-viking-diva: #bcbae8;
  --color-viking-diva-50: #f3f3ff;
  --color-viking-diva-100: #e8e8ff;
  --color-viking-diva-200: #d3d2f5;
  --color-viking-diva-300: #bcbae8;
  --color-viking-diva-400: #9d9bc6;
  --color-viking-diva-500: #8280ab;
  --color-viking-diva-600: #68668e;
  --color-viking-diva-700: #525075;
  --color-viking-diva-800: #403e5e;
  --color-viking-diva-900: #312f4a;
  --color-viking-diva-950: #1e1c30;
  --color-milk-foam: #eeffe0;
  --color-milk-foam-50: #eeffe0;
  --color-milk-foam-100: #e8f2df;
  --color-milk-foam-200: #d2dec8;
  --color-milk-foam-300: #bac8af;
  --color-milk-foam-400: #99a88d;
  --color-milk-foam-500: #7d8c71;
  --color-milk-foam-600: #637157;
  --color-milk-foam-700: #4d5a42;
  --color-milk-foam-800: #3b4732;
  --color-milk-foam-900: #2d3625;
  --color-milk-foam-950: #1b2215;
  --color-mellow-mint: #dce8b3;
  --color-mellow-mint-50: #f9ffe7;
  --color-mellow-mint-100: #f0f7da;
  --color-mellow-mint-200: #dce8b3;
  --color-mellow-mint-300: #c5cea4;
  --color-mellow-mint-400: #a3ae7e;
  --color-mellow-mint-500: #86915f;
  --color-mellow-mint-600: #6b7445;
  --color-mellow-mint-700: #535c30;
  --color-mellow-mint-800: #3f4720;
  --color-mellow-mint-900: #303616;
  --color-mellow-mint-950: #1d220a;
  --color-cream-puff: #f9b994;
  --color-cream-puff-50: #fff8f4;
  --color-cream-puff-100: #ffede3;
  --color-cream-puff-200: #ffd5bc;
  --color-cream-puff-300: #f9b994;
  --color-cream-puff-400: #d39977;
  --color-cream-puff-500: #b77b58;
  --color-cream-puff-600: #98603e;
  --color-cream-puff-700: #7c4929;
  --color-cream-puff-800: #63361a;
  --color-cream-puff-900: #4d280f;
  --color-cream-puff-950: #321706;
}