Moelleux au Chocolat to Featherbed color palette

563318Moelleux au Chocolat 005278Sea Paint 75833EGrasshopper A584C1Petrified Purple A3CDE7Featherbed

Open in generator Export PNG, PDF, ASE…

About this palette

Moelleux au Chocolat to Featherbed is a 5-color cool palette: #563318 (Moelleux au Chocolat), #005278 (Sea Paint), #75833E (Grasshopper), #A584C1 (Petrified Purple), #A3CDE7 (Featherbed). It mixes brown, blue, green, purple tones and feels cool overall. The strongest text pairing is #563318 on #A3CDE7 with a contrast ratio of 6.61:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moelleux au Chocolat	rgb(86, 51, 24)	hsl(26, 56%, 22%)
Sea Paint	rgb(0, 82, 120)	hsl(199, 100%, 24%)
Grasshopper	rgb(117, 131, 62)	hsl(72, 36%, 38%)
Petrified Purple	rgb(165, 132, 193)	hsl(272, 33%, 64%)
Featherbed	rgb(163, 205, 231)	hsl(203, 59%, 77%)

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.

Aa6.61:1 Good#563318 on #A3CDE7
Aa6.61:1 Good#A3CDE7 on #563318
Aa5.02:1 Good#005278 on #A3CDE7
Aa5.02:1 Good#A3CDE7 on #005278
Aa3.54:1 Poor#563318 on #A584C1
Aa3.54:1 Poor#A584C1 on #563318

Color blindness preview

CSS variables

/* Moelleux au Chocolat to Featherbed — https://swatchly.xyz/palette/563318-005278-75833e-a584c1-a3cde7 */
:root {
  --moelleux-au-chocolat: #563318;
  --sea-paint: #005278;
  --grasshopper: #75833e;
  --petrified-purple: #a584c1;
  --featherbed: #a3cde7;
}

Tailwind CSS v4

/* Moelleux au Chocolat to Featherbed — https://swatchly.xyz/palette/563318-005278-75833e-a584c1-a3cde7 */
@theme {
  --color-moelleux-au-chocolat: #563318;
  --color-moelleux-au-chocolat-50: #fff2ea;
  --color-moelleux-au-chocolat-100: #ffe6d4;
  --color-moelleux-au-chocolat-200: #f1d0ba;
  --color-moelleux-au-chocolat-300: #dcb79e;
  --color-moelleux-au-chocolat-400: #be967a;
  --color-moelleux-au-chocolat-500: #a1795d;
  --color-moelleux-au-chocolat-600: #845e43;
  --color-moelleux-au-chocolat-700: #694830;
  --color-moelleux-au-chocolat-800: #563318;
  --color-moelleux-au-chocolat-900: #402817;
  --color-moelleux-au-chocolat-950: #28170b;
  --color-sea-paint: #005278;
  --color-sea-paint-50: #ecf7ff;
  --color-sea-paint-100: #d8efff;
  --color-sea-paint-200: #abddfe;
  --color-sea-paint-300: #8cc5eb;
  --color-sea-paint-400: #64a5ce;
  --color-sea-paint-500: #4587b0;
  --color-sea-paint-600: #296b91;
  --color-sea-paint-700: #005278;
  --color-sea-paint-800: #07405d;
  --color-sea-paint-900: #023149;
  --color-sea-paint-950: #001e2f;
  --color-grasshopper: #75833e;
  --color-grasshopper-50: #eff9d1;
  --color-grasshopper-100: #e2eec0;
  --color-grasshopper-200: #ccd9a2;
  --color-grasshopper-300: #b3c183;
  --color-grasshopper-400: #92a05c;
  --color-grasshopper-500: #75833e;
  --color-grasshopper-600: #5d6a27;
  --color-grasshopper-700: #4a5517;
  --color-grasshopper-800: #39430a;
  --color-grasshopper-900: #2c3404;
  --color-grasshopper-950: #1b2101;
  --color-petrified-purple: #a584c1;
  --color-petrified-purple-50: #f6ecff;
  --color-petrified-purple-100: #eedbff;
  --color-petrified-purple-200: #dcc1f4;
  --color-petrified-purple-300: #c5a7e0;
  --color-petrified-purple-400: #a584c1;
  --color-petrified-purple-500: #8c6ba7;
  --color-petrified-purple-600: #73548c;
  --color-petrified-purple-700: #5d4173;
  --color-petrified-purple-800: #4a325e;
  --color-petrified-purple-900: #3b264c;
  --color-petrified-purple-950: #271733;
  --color-featherbed: #a3cde7;
  --color-featherbed-50: #f1f9ff;
  --color-featherbed-100: #def2ff;
  --color-featherbed-200: #c3e1f4;
  --color-featherbed-300: #a3cde7;
  --color-featherbed-400: #85acc4;
  --color-featherbed-500: #6890a8;
  --color-featherbed-600: #4d748b;
  --color-featherbed-700: #385c71;
  --color-featherbed-800: #28475a;
  --color-featherbed-900: #1c3646;
  --color-featherbed-950: #0e222d;
}