Pink Glitter to Olive Leaf Color Palette

About this palette

Pink Glitter to Olive Leaf is a 5-color muted, vintage palette: #FBE1D9 (Pink Glitter), #D5B0AC (Borlotti Bean), #8293BA (Celestial Horizon), #53747D (Hydro), #4E472E (Olive Leaf). It mixes gray, pink, blue, brown tones and feels balanced overall. The strongest text pairing is #FBE1D9 on #4E472E with a contrast ratio of 7.45:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Glitter	rgb(251, 225, 217)	hsl(14, 81%, 92%)
Borlotti Bean	rgb(213, 176, 172)	hsl(6, 33%, 75%)
Celestial Horizon	rgb(130, 147, 186)	hsl(222, 29%, 62%)
Hydro	rgb(83, 116, 125)	hsl(193, 20%, 41%)
Olive Leaf	rgb(78, 71, 46)	hsl(47, 26%, 24%)

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.

Aa7.45:1 Very good#FBE1D9 on #4E472E
Aa7.45:1 Very good#4E472E on #FBE1D9
Aa4.70:1 Good#D5B0AC on #4E472E
Aa4.70:1 Good#4E472E on #D5B0AC
Aa4.05:1 Poor#FBE1D9 on #53747D
Aa4.05:1 Poor#53747D on #FBE1D9
Aa3.02:1 Poor#8293BA on #4E472E
Aa3.02:1 Poor#4E472E on #8293BA

Color blindness preview

CSS variables

/* Pink Glitter to Olive Leaf — https://swatchly.xyz/palette/fbe1d9-d5b0ac-8293ba-53747d-4e472e */
:root {
  --pink-glitter: #fbe1d9;
  --borlotti-bean: #d5b0ac;
  --celestial-horizon: #8293ba;
  --hydro: #53747d;
  --olive-leaf: #4e472e;
}

Tailwind CSS v4

/* Pink Glitter to Olive Leaf — https://swatchly.xyz/palette/fbe1d9-d5b0ac-8293ba-53747d-4e472e */
@theme {
  --color-pink-glitter: #fbe1d9;
  --color-pink-glitter-50: #fdeeea;
  --color-pink-glitter-100: #fbe1d9;
  --color-pink-glitter-200: #e3d0ca;
  --color-pink-glitter-300: #cfb9b2;
  --color-pink-glitter-400: #b19a93;
  --color-pink-glitter-500: #967f78;
  --color-pink-glitter-600: #7c665f;
  --color-pink-glitter-700: #64504a;
  --color-pink-glitter-800: #4f3e39;
  --color-pink-glitter-900: #3d2f2b;
  --color-pink-glitter-950: #271c19;
  --color-borlotti-bean: #d5b0ac;
  --color-borlotti-bean-50: #ffedeb;
  --color-borlotti-bean-100: #f9e0dd;
  --color-borlotti-bean-200: #e7cac7;
  --color-borlotti-bean-300: #d5b0ac;
  --color-borlotti-bean-400: #b5928f;
  --color-borlotti-bean-500: #9b7875;
  --color-borlotti-bean-600: #80605c;
  --color-borlotti-bean-700: #684b48;
  --color-borlotti-bean-800: #533a38;
  --color-borlotti-bean-900: #422c2a;
  --color-borlotti-bean-950: #2a1b19;
  --color-celestial-horizon: #8293ba;
  --color-celestial-horizon-50: #f4f8ff;
  --color-celestial-horizon-100: #e9f0ff;
  --color-celestial-horizon-200: #d2dffc;
  --color-celestial-horizon-300: #bbcaec;
  --color-celestial-horizon-400: #9cadd2;
  --color-celestial-horizon-500: #8293ba;
  --color-celestial-horizon-600: #66769b;
  --color-celestial-horizon-700: #4e5d7f;
  --color-celestial-horizon-800: #3b4865;
  --color-celestial-horizon-900: #2b364f;
  --color-celestial-horizon-950: #192032;
  --color-hydro: #53747d;
  --color-hydro-50: #e6f9ff;
  --color-hydro-100: #daf0f6;
  --color-hydro-200: #c3dee5;
  --color-hydro-300: #aac8d0;
  --color-hydro-400: #88a9b3;
  --color-hydro-500: #6d8e98;
  --color-hydro-600: #53747d;
  --color-hydro-700: #3f5c64;
  --color-hydro-800: #2e484f;
  --color-hydro-900: #21383e;
  --color-hydro-950: #122327;
  --color-olive-leaf: #4e472e;
  --color-olive-leaf-50: #faf5e5;
  --color-olive-leaf-100: #f0ebd9;
  --color-olive-leaf-200: #ded8c2;
  --color-olive-leaf-300: #c9c2aa;
  --color-olive-leaf-400: #aba389;
  --color-olive-leaf-500: #90896e;
  --color-olive-leaf-600: #776f55;
  --color-olive-leaf-700: #605941;
  --color-olive-leaf-800: #4e472e;
  --color-olive-leaf-900: #3c3724;
  --color-olive-leaf-950: #262215;
}