Strawberry Bonbon to Total Eclipse color palette

FFE7FEStrawberry Bonbon C1AB86Faded Letter 67915CFour Leaf Clover 465976Deep Indigo 29344ATotal Eclipse

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Bonbon to Total Eclipse is a 5-color muted, cool palette: #FFE7FE (Strawberry Bonbon), #C1AB86 (Faded Letter), #67915C (Four Leaf Clover), #465976 (Deep Indigo), #29344A (Total Eclipse). It mixes white, yellow, green, blue tones and feels cool overall. The strongest text pairing is #FFE7FE on #29344A with a contrast ratio of 10.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(255, 231, 254)	hsl(302, 100%, 95%)
Faded Letter	rgb(193, 171, 134)	hsl(38, 32%, 64%)
Four Leaf Clover	rgb(103, 145, 92)	hsl(108, 22%, 46%)
Deep Indigo	rgb(70, 89, 118)	hsl(216, 26%, 37%)
Total Eclipse	rgb(41, 52, 74)	hsl(220, 29%, 23%)

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.

Aa10.75:1 Very good#FFE7FE on #29344A
Aa10.75:1 Very good#29344A on #FFE7FE
Aa6.14:1 Good#FFE7FE on #465976
Aa6.14:1 Good#465976 on #FFE7FE
Aa5.60:1 Good#C1AB86 on #29344A
Aa5.60:1 Good#29344A on #C1AB86
Aa3.43:1 Poor#67915C on #29344A
Aa3.43:1 Poor#29344A on #67915C

Color blindness preview

CSS variables

/* Strawberry Bonbon to Total Eclipse — https://swatchly.xyz/palette/ffe7fe-c1ab86-67915c-465976-29344a */
:root {
  --strawberry-bonbon: #ffe7fe;
  --faded-letter: #c1ab86;
  --four-leaf-clover: #67915c;
  --deep-indigo: #465976;
  --total-eclipse: #29344a;
}

Tailwind CSS v4

/* Strawberry Bonbon to Total Eclipse — https://swatchly.xyz/palette/ffe7fe-c1ab86-67915c-465976-29344a */
@theme {
  --color-strawberry-bonbon: #ffe7fe;
  --color-strawberry-bonbon-50: #fff6ff;
  --color-strawberry-bonbon-100: #ffe7fe;
  --color-strawberry-bonbon-200: #e6d5e5;
  --color-strawberry-bonbon-300: #d0bdcf;
  --color-strawberry-bonbon-400: #b19cb0;
  --color-strawberry-bonbon-500: #957f94;
  --color-strawberry-bonbon-600: #796578;
  --color-strawberry-bonbon-700: #614e60;
  --color-strawberry-bonbon-800: #4c3c4c;
  --color-strawberry-bonbon-900: #3b2e3b;
  --color-strawberry-bonbon-950: #251c25;
  --color-faded-letter: #c1ab86;
  --color-faded-letter-50: #fff9ef;
  --color-faded-letter-100: #fdf0da;
  --color-faded-letter-200: #eedec4;
  --color-faded-letter-300: #dbc9ab;
  --color-faded-letter-400: #c1ab86;
  --color-faded-letter-500: #a28d6a;
  --color-faded-letter-600: #85704e;
  --color-faded-letter-700: #6b5838;
  --color-faded-letter-800: #544327;
  --color-faded-letter-900: #40321a;
  --color-faded-letter-950: #271e0d;
  --color-four-leaf-clover: #67915c;
  --color-four-leaf-clover-50: #e4fdde;
  --color-four-leaf-clover-100: #d8f4d0;
  --color-four-leaf-clover-200: #c0e2b7;
  --color-four-leaf-clover-300: #a6cc9c;
  --color-four-leaf-clover-400: #83ad78;
  --color-four-leaf-clover-500: #67915c;
  --color-four-leaf-clover-600: #4e7644;
  --color-four-leaf-clover-700: #3a5f31;
  --color-four-leaf-clover-800: #2b4b22;
  --color-four-leaf-clover-900: #1f3a18;
  --color-four-leaf-clover-950: #11250c;
  --color-deep-indigo: #465976;
  --color-deep-indigo-50: #eff6ff;
  --color-deep-indigo-100: #e0ecff;
  --color-deep-indigo-200: #c9d9f3;
  --color-deep-indigo-300: #b1c3e0;
  --color-deep-indigo-400: #90a4c3;
  --color-deep-indigo-500: #7589a9;
  --color-deep-indigo-600: #5c6f8d;
  --color-deep-indigo-700: #465976;
  --color-deep-indigo-800: #36455d;
  --color-deep-indigo-900: #283549;
  --color-deep-indigo-950: #17212f;
  --color-total-eclipse: #29344a;
  --color-total-eclipse-50: #f0f5ff;
  --color-total-eclipse-100: #e2ecfd;
  --color-total-eclipse-200: #cdd8ed;
  --color-total-eclipse-300: #b5c1d9;
  --color-total-eclipse-400: #95a2bc;
  --color-total-eclipse-500: #7a87a1;
  --color-total-eclipse-600: #606d85;
  --color-total-eclipse-700: #4b566d;
  --color-total-eclipse-800: #3a4457;
  --color-total-eclipse-900: #29344a;
  --color-total-eclipse-950: #1a202c;
}