Mellow Marrow to Sugar Glaze Color Palette

About this palette

Mellow Marrow to Sugar Glaze is a 4-color pastel, light palette: #E9C2B8 (Mellow Marrow), #A4DFB9 (Big Spender), #B1F5D7 (Seafoam Splashes), #FFF1E0 (Sugar Glaze). It mixes pink, green, turquoise, white tones and feels cool overall. The strongest text pairing is #E9C2B8 on #FFF1E0 with a contrast ratio of 1.47:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mellow Marrow	rgb(233, 194, 184)	hsl(12, 53%, 82%)
Big Spender	rgb(164, 223, 185)	hsl(141, 48%, 76%)
Seafoam Splashes	rgb(177, 245, 215)	hsl(154, 77%, 83%)
Sugar Glaze	rgb(255, 241, 224)	hsl(33, 100%, 94%)

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

/* Mellow Marrow to Sugar Glaze — https://swatchly.xyz/palette/e9c2b8-a4dfb9-b1f5d7-fff1e0 */
:root {
  --mellow-marrow: #e9c2b8;
  --big-spender: #a4dfb9;
  --seafoam-splashes: #b1f5d7;
  --sugar-glaze: #fff1e0;
}

Tailwind CSS v4

/* Mellow Marrow to Sugar Glaze — https://swatchly.xyz/palette/e9c2b8-a4dfb9-b1f5d7-fff1e0 */
@theme {
  --color-mellow-marrow: #e9c2b8;
  --color-mellow-marrow-50: #ffe7e1;
  --color-mellow-marrow-100: #f6dbd4;
  --color-mellow-marrow-200: #e9c2b8;
  --color-mellow-marrow-300: #d1afa6;
  --color-mellow-marrow-400: #b59188;
  --color-mellow-marrow-500: #9b776e;
  --color-mellow-marrow-600: #815f57;
  --color-mellow-marrow-700: #694b44;
  --color-mellow-marrow-800: #553b34;
  --color-mellow-marrow-900: #432c27;
  --color-mellow-marrow-950: #2b1b17;
  --color-big-spender: #a4dfb9;
  --color-big-spender-50: #d7f9e2;
  --color-big-spender-100: #c8efd5;
  --color-big-spender-200: #a4dfb9;
  --color-big-spender-300: #95c8a7;
  --color-big-spender-400: #73ab88;
  --color-big-spender-500: #58916e;
  --color-big-spender-600: #407756;
  --color-big-spender-700: #2e6043;
  --color-big-spender-800: #204d33;
  --color-big-spender-900: #153c26;
  --color-big-spender-950: #092616;
  --color-seafoam-splashes: #b1f5d7;
  --color-seafoam-splashes-50: #d2f9e7;
  --color-seafoam-splashes-100: #b1f5d7;
  --color-seafoam-splashes-200: #acdfc8;
  --color-seafoam-splashes-300: #91cbb1;
  --color-seafoam-splashes-400: #6ead93;
  --color-seafoam-splashes-500: #529378;
  --color-seafoam-splashes-600: #397960;
  --color-seafoam-splashes-700: #25624b;
  --color-seafoam-splashes-800: #164d3a;
  --color-seafoam-splashes-900: #0c3c2c;
  --color-seafoam-splashes-950: #04261a;
  --color-sugar-glaze: #fff1e0;
  --color-sugar-glaze-50: #fff1e0;
  --color-sugar-glaze-100: #f1e8de;
  --color-sugar-glaze-200: #dfd5c8;
  --color-sugar-glaze-300: #cabeb0;
  --color-sugar-glaze-400: #ab9f90;
  --color-sugar-glaze-500: #908474;
  --color-sugar-glaze-600: #766a5b;
  --color-sugar-glaze-700: #5e5346;
  --color-sugar-glaze-800: #4a4135;
  --color-sugar-glaze-900: #393128;
  --color-sugar-glaze-950: #241e17;
}