Fresh Blue of Bel Air to Moelleux au Chocolat color palette

0094F6Fresh Blue of Bel Air BEE1FFBroad Daylight 803084Purple Sultan 4CC292Macau 562C01Moelleux au Chocolat

Open in generator Export PNG, PDF, ASE…

About this palette

Fresh Blue of Bel Air to Moelleux au Chocolat is a 5-color cool palette: #0094F6 (Fresh Blue of Bel Air), #BEE1FF (Broad Daylight), #803084 (Purple Sultan), #4CC292 (Macau), #562C01 (Moelleux au Chocolat). It mixes blue, pink, green, brown tones and feels cool overall. The strongest text pairing is #BEE1FF on #562C01 with a contrast ratio of 8.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Blue of Bel Air	rgb(0, 148, 246)	hsl(204, 100%, 48%)
Broad Daylight	rgb(190, 225, 255)	hsl(208, 100%, 87%)
Purple Sultan	rgb(128, 48, 132)	hsl(297, 47%, 35%)
Macau	rgb(76, 194, 146)	hsl(156, 49%, 53%)
Moelleux au Chocolat	rgb(86, 44, 1)	hsl(30, 98%, 17%)

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.

Aa8.77:1 Very good#BEE1FF on #562C01
Aa8.77:1 Very good#562C01 on #BEE1FF
Aa5.76:1 Good#BEE1FF on #803084
Aa5.76:1 Good#803084 on #BEE1FF
Aa5.37:1 Good#4CC292 on #562C01
Aa5.37:1 Good#562C01 on #4CC292
Aa3.74:1 Poor#0094F6 on #562C01
Aa3.74:1 Poor#562C01 on #0094F6

Color blindness preview

CSS variables

/* Fresh Blue of Bel Air to Moelleux au Chocolat — https://swatchly.xyz/palette/0094f6-bee1ff-803084-4cc292-562c01 */
:root {
  --fresh-blue-of-bel-air: #0094f6;
  --broad-daylight: #bee1ff;
  --purple-sultan: #803084;
  --macau: #4cc292;
  --moelleux-au-chocolat: #562c01;
}

Tailwind CSS v4

/* Fresh Blue of Bel Air to Moelleux au Chocolat — https://swatchly.xyz/palette/0094f6-bee1ff-803084-4cc292-562c01 */
@theme {
  --color-fresh-blue-of-bel-air: #0094f6;
  --color-fresh-blue-of-bel-air-50: #f1f8ff;
  --color-fresh-blue-of-bel-air-100: #e3f1ff;
  --color-fresh-blue-of-bel-air-200: #c2e1ff;
  --color-fresh-blue-of-bel-air-300: #9bcdff;
  --color-fresh-blue-of-bel-air-400: #5ab0ff;
  --color-fresh-blue-of-bel-air-500: #0094f6;
  --color-fresh-blue-of-bel-air-600: #0077c7;
  --color-fresh-blue-of-bel-air-700: #005e9f;
  --color-fresh-blue-of-bel-air-800: #00497d;
  --color-fresh-blue-of-bel-air-900: #003761;
  --color-fresh-blue-of-bel-air-950: #00223f;
  --color-broad-daylight: #bee1ff;
  --color-broad-daylight-50: #f3f9ff;
  --color-broad-daylight-100: #e2f1ff;
  --color-broad-daylight-200: #bee1ff;
  --color-broad-daylight-300: #acc9e1;
  --color-broad-daylight-400: #89a9c4;
  --color-broad-daylight-500: #6c8ca8;
  --color-broad-daylight-600: #52718b;
  --color-broad-daylight-700: #3d5971;
  --color-broad-daylight-800: #2c455a;
  --color-broad-daylight-900: #203546;
  --color-broad-daylight-950: #12212d;
  --color-purple-sultan: #803084;
  --color-purple-sultan-50: #ffefff;
  --color-purple-sultan-100: #ffdfff;
  --color-purple-sultan-200: #febfff;
  --color-purple-sultan-300: #eda3ef;
  --color-purple-sultan-400: #d180d4;
  --color-purple-sultan-500: #b563b9;
  --color-purple-sultan-600: #98499c;
  --color-purple-sultan-700: #803084;
  --color-purple-sultan-800: #652468;
  --color-purple-sultan-900: #501853;
  --color-purple-sultan-950: #340b36;
  --color-macau: #4cc292;
  --color-macau-50: #e6fff2;
  --color-macau-100: #c4ffe2;
  --color-macau-200: #a4f0cc;
  --color-macau-300: #83ddb4;
  --color-macau-400: #4cc292;
  --color-macau-500: #26a476;
  --color-macau-600: #00855d;
  --color-macau-700: #006948;
  --color-macau-800: #005237;
  --color-macau-900: #003f29;
  --color-macau-950: #002718;
  --color-moelleux-au-chocolat: #562c01;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #ffe6d3;
  --color-moelleux-au-chocolat-200: #f6cfb1;
  --color-moelleux-au-chocolat-300: #e3b795;
  --color-moelleux-au-chocolat-400: #c79772;
  --color-moelleux-au-chocolat-500: #ad7c56;
  --color-moelleux-au-chocolat-600: #91633e;
  --color-moelleux-au-chocolat-700: #784e2c;
  --color-moelleux-au-chocolat-800: #633d1e;
  --color-moelleux-au-chocolat-900: #562c01;
  --color-moelleux-au-chocolat-950: #351d08;
}