Start generating

Pink Glitter to OMGreen color palette

FCE0D5Pink Glitter6B586CPlummyA3C4D8Metal Gear826F86Flying Carpet303D44Do Not Disturb90A694OMGreen
Open in generator Export PNG, PDF, ASE…

About this palette

Pink Glitter to OMGreen is a 6-color muted, cool palette: #FCE0D5 (Pink Glitter), #6B586C (Plummy), #A3C4D8 (Metal Gear), #826F86 (Flying Carpet), #303D44 (Do Not Disturb), #90A694 (OMGreen). It mixes gray, pink, blue, purple, green tones and feels cool overall. The strongest text pairing is #FCE0D5 on #303D44 with a contrast ratio of 8.93:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pink Glitterrgb(252, 224, 213)hsl(17, 87%, 91%)
Plummyrgb(107, 88, 108)hsl(297, 10%, 38%)
Metal Gearrgb(163, 196, 216)hsl(203, 40%, 74%)
Flying Carpetrgb(130, 111, 134)hsl(290, 9%, 48%)
Do Not Disturbrgb(48, 61, 68)hsl(201, 17%, 23%)
OMGreenrgb(144, 166, 148)hsl(131, 11%, 61%)

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.

  • Aa8.93:1 Very good#FCE0D5 on #303D44
  • Aa8.93:1 Very good#303D44 on #FCE0D5
  • Aa6.10:1 Good#A3C4D8 on #303D44
  • Aa6.10:1 Good#303D44 on #A3C4D8
  • Aa5.18:1 Good#FCE0D5 on #6B586C
  • Aa5.18:1 Good#6B586C on #FCE0D5
  • Aa4.30:1 Poor#303D44 on #90A694
  • Aa4.30:1 Poor#90A694 on #303D44

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pink Glitter to OMGreen — https://swatchly.xyz/palette/fce0d5-6b586c-a3c4d8-826f86-303d44-90a694 */
:root {
  --pink-glitter: #fce0d5;
  --plummy: #6b586c;
  --metal-gear: #a3c4d8;
  --flying-carpet: #826f86;
  --do-not-disturb: #303d44;
  --omgreen: #90a694;
}

Tailwind CSS v4

/* Pink Glitter to OMGreen — https://swatchly.xyz/palette/fce0d5-6b586c-a3c4d8-826f86-303d44-90a694 */
@theme {
  --color-pink-glitter: #fce0d5;
  --color-pink-glitter-50: #feeee7;
  --color-pink-glitter-100: #fce0d5;
  --color-pink-glitter-200: #e4cfc7;
  --color-pink-glitter-300: #d0b8af;
  --color-pink-glitter-400: #b2998f;
  --color-pink-glitter-500: #987f75;
  --color-pink-glitter-600: #7d655c;
  --color-pink-glitter-700: #655047;
  --color-pink-glitter-800: #503e36;
  --color-pink-glitter-900: #3e2f29;
  --color-pink-glitter-950: #281c18;
  --color-plummy: #6b586c;
  --color-plummy-50: #fdf0fd;
  --color-plummy-100: #f4e6f4;
  --color-plummy-200: #e4d3e4;
  --color-plummy-300: #d0bed1;
  --color-plummy-400: #b3a0b4;
  --color-plummy-500: #9a869b;
  --color-plummy-600: #816d82;
  --color-plummy-700: #6b586c;
  --color-plummy-800: #544455;
  --color-plummy-900: #413442;
  --color-plummy-950: #2a202a;
  --color-metal-gear: #a3c4d8;
  --color-metal-gear-50: #e8f6ff;
  --color-metal-gear-100: #d8edfa;
  --color-metal-gear-200: #c1dae9;
  --color-metal-gear-300: #a3c4d8;
  --color-metal-gear-400: #86a5b7;
  --color-metal-gear-500: #6a8a9c;
  --color-metal-gear-600: #516f81;
  --color-metal-gear-700: #3d5969;
  --color-metal-gear-800: #2e4654;
  --color-metal-gear-900: #213642;
  --color-metal-gear-950: #13212a;
  --color-flying-carpet: #826f86;
  --color-flying-carpet-50: #fcf0ff;
  --color-flying-carpet-100: #f5e8f8;
  --color-flying-carpet-200: #e5d6e8;
  --color-flying-carpet-300: #d1c0d5;
  --color-flying-carpet-400: #b5a2b9;
  --color-flying-carpet-500: #9b889f;
  --color-flying-carpet-600: #826f86;
  --color-flying-carpet-700: #68576c;
  --color-flying-carpet-800: #524355;
  --color-flying-carpet-900: #3f3242;
  --color-flying-carpet-950: #281e2a;
  --color-do-not-disturb: #303d44;
  --color-do-not-disturb-50: #eef7fc;
  --color-do-not-disturb-100: #e3edf2;
  --color-do-not-disturb-200: #cedae0;
  --color-do-not-disturb-300: #b4c2c9;
  --color-do-not-disturb-400: #93a1a9;
  --color-do-not-disturb-500: #76848c;
  --color-do-not-disturb-600: #5b6970;
  --color-do-not-disturb-700: #455157;
  --color-do-not-disturb-800: #303d44;
  --color-do-not-disturb-900: #262e33;
  --color-do-not-disturb-950: #161c1f;
  --color-omgreen: #90a694;
  --color-omgreen-50: #ebf8ee;
  --color-omgreen-100: #e0efe2;
  --color-omgreen-200: #cadbcd;
  --color-omgreen-300: #b2c5b5;
  --color-omgreen-400: #90a694;
  --color-omgreen-500: #758b79;
  --color-omgreen-600: #5c7060;
  --color-omgreen-700: #475a4b;
  --color-omgreen-800: #36463a;
  --color-omgreen-900: #29362c;
  --color-omgreen-950: #18221a;
}

Similar palettes