Scented Spring to Sakura Night Color Palette

About this palette

Scented Spring to Sakura Night is a 5-color muted palette: #EBD3EB (Scented Spring), #5F5565 (Fedora), #233224 (Marshland), #A6B2A0 (Gargoyle), #7F6F80 (Sakura Night). It mixes pink, gray tones and feels cool overall. The strongest text pairing is #EBD3EB on #233224 with a contrast ratio of 9.69:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Scented Spring	rgb(235, 211, 235)	hsl(300, 38%, 87%)
Fedora	rgb(95, 85, 101)	hsl(278, 9%, 36%)
Marshland	rgb(35, 50, 36)	hsl(124, 18%, 17%)
Gargoyle	rgb(166, 178, 160)	hsl(100, 10%, 66%)
Sakura Night	rgb(127, 111, 128)	hsl(296, 7%, 47%)

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.

Aa9.69:1 Very good#EBD3EB on #233224
Aa9.69:1 Very good#233224 on #EBD3EB
Aa6.11:1 Good#233224 on #A6B2A0
Aa6.11:1 Good#A6B2A0 on #233224
Aa5.06:1 Good#EBD3EB on #5F5565
Aa5.06:1 Good#5F5565 on #EBD3EB
Aa3.35:1 Poor#EBD3EB on #7F6F80
Aa3.35:1 Poor#7F6F80 on #EBD3EB

Color blindness preview

CSS variables

/* Scented Spring to Sakura Night — https://swatchly.xyz/palette/ebd3eb-5f5565-233224-a6b2a0-7f6f80 */
:root {
  --scented-spring: #ebd3eb;
  --fedora: #5f5565;
  --marshland: #233224;
  --gargoyle: #a6b2a0;
  --sakura-night: #7f6f80;
}

Tailwind CSS v4

/* Scented Spring to Sakura Night — https://swatchly.xyz/palette/ebd3eb-5f5565-233224-a6b2a0-7f6f80 */
@theme {
  --color-scented-spring: #ebd3eb;
  --color-scented-spring-50: #fff4ff;
  --color-scented-spring-100: #f8eaf8;
  --color-scented-spring-200: #ebd3eb;
  --color-scented-spring-300: #d1bdd1;
  --color-scented-spring-400: #b29cb2;
  --color-scented-spring-500: #968096;
  --color-scented-spring-600: #7a657a;
  --color-scented-spring-700: #614f62;
  --color-scented-spring-800: #4c3c4c;
  --color-scented-spring-900: #3b2d3b;
  --color-scented-spring-950: #251b25;
  --color-fedora: #5f5565;
  --color-fedora-50: #f9f2fd;
  --color-fedora-100: #efe8f4;
  --color-fedora-200: #ddd5e2;
  --color-fedora-300: #c8bece;
  --color-fedora-400: #aa9fb0;
  --color-fedora-500: #8f8496;
  --color-fedora-600: #756b7b;
  --color-fedora-700: #5f5565;
  --color-fedora-800: #4a424f;
  --color-fedora-900: #39323d;
  --color-fedora-950: #241f27;
  --color-marshland: #233224;
  --color-marshland-50: #eef9ee;
  --color-marshland-100: #e3efe4;
  --color-marshland-200: #cedcce;
  --color-marshland-300: #b6c6b7;
  --color-marshland-400: #95a695;
  --color-marshland-500: #788a79;
  --color-marshland-600: #5d6e5e;
  --color-marshland-700: #475648;
  --color-marshland-800: #354236;
  --color-marshland-900: #233224;
  --color-marshland-950: #161d17;
  --color-gargoyle: #a6b2a0;
  --color-gargoyle-50: #f5fcf2;
  --color-gargoyle-100: #edf4e9;
  --color-gargoyle-200: #dae3d6;
  --color-gargoyle-300: #c5cfc0;
  --color-gargoyle-400: #a6b2a0;
  --color-gargoyle-500: #899483;
  --color-gargoyle-600: #6c7767;
  --color-gargoyle-700: #545e4f;
  --color-gargoyle-800: #40493c;
  --color-gargoyle-900: #30372c;
  --color-gargoyle-950: #1c2119;
  --color-sakura-night: #7f6f80;
  --color-sakura-night-50: #fbf1fc;
  --color-sakura-night-100: #f4e9f4;
  --color-sakura-night-200: #e3d6e4;
  --color-sakura-night-300: #cfc1d0;
  --color-sakura-night-400: #b2a2b3;
  --color-sakura-night-500: #988899;
  --color-sakura-night-600: #7f6f80;
  --color-sakura-night-700: #665767;
  --color-sakura-night-800: #504351;
  --color-sakura-night-900: #3e333e;
  --color-sakura-night-950: #271f27;
}