Pastel Purple to Opium color palette

A9A5C4Pastel Purple 3B3D2DBlack Olive E6CDCEPetite Pink 3A6065After the Storm 937678Opium

About this palette

Pastel Purple to Opium is a 5-color muted palette: #A9A5C4 (Pastel Purple), #3B3D2D (Black Olive), #E6CDCE (Petite Pink), #3A6065 (After the Storm), #937678 (Opium). It mixes purple, gray, turquoise, red tones and feels cool overall. The strongest text pairing is #3B3D2D on #E6CDCE with a contrast ratio of 7.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Purple	rgb(169, 165, 196)	hsl(248, 21%, 71%)
Black Olive	rgb(59, 61, 45)	hsl(68, 15%, 21%)
Petite Pink	rgb(230, 205, 206)	hsl(358, 33%, 85%)
After the Storm	rgb(58, 96, 101)	hsl(187, 27%, 31%)
Opium	rgb(147, 118, 120)	hsl(356, 12%, 52%)

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.40:1 Very good#3B3D2D on #E6CDCE
Aa7.40:1 Very good#E6CDCE on #3B3D2D
Aa4.69:1 Good#A9A5C4 on #3B3D2D
Aa4.69:1 Good#3B3D2D on #A9A5C4
Aa4.60:1 Good#E6CDCE on #3A6065
Aa4.60:1 Good#3A6065 on #E6CDCE

Color blindness preview

CSS variables

/* Pastel Purple to Opium — https://swatchly.xyz/palette/a9a5c4-3b3d2d-e6cdce-3a6065-937678 */
:root {
  --pastel-purple: #a9a5c4;
  --black-olive: #3b3d2d;
  --petite-pink: #e6cdce;
  --after-the-storm: #3a6065;
  --opium: #937678;
}

Tailwind CSS v4

/* Pastel Purple to Opium — https://swatchly.xyz/palette/a9a5c4-3b3d2d-e6cdce-3a6065-937678 */
@theme {
  --color-pastel-purple: #a9a5c4;
  --color-pastel-purple-50: #f8f7ff;
  --color-pastel-purple-100: #efedff;
  --color-pastel-purple-200: #dddaf1;
  --color-pastel-purple-300: #c7c4de;
  --color-pastel-purple-400: #a9a5c4;
  --color-pastel-purple-500: #8c88a6;
  --color-pastel-purple-600: #706c89;
  --color-pastel-purple-700: #59556f;
  --color-pastel-purple-800: #444158;
  --color-pastel-purple-900: #343144;
  --color-pastel-purple-950: #1f1d2b;
  --color-black-olive: #3b3d2d;
  --color-black-olive-50: #f5f6eb;
  --color-black-olive-100: #ebede0;
  --color-black-olive-200: #d7d9cb;
  --color-black-olive-300: #bfc1b1;
  --color-black-olive-400: #9ea18f;
  --color-black-olive-500: #828472;
  --color-black-olive-600: #666958;
  --color-black-olive-700: #4f5142;
  --color-black-olive-800: #3b3d2d;
  --color-black-olive-900: #2d2e24;
  --color-black-olive-950: #1b1c14;
  --color-petite-pink: #e6cdce;
  --color-petite-pink-50: #fdefef;
  --color-petite-pink-100: #f4e4e4;
  --color-petite-pink-200: #e6cdce;
  --color-petite-pink-300: #cdb8b9;
  --color-petite-pink-400: #b0999a;
  --color-petite-pink-500: #957e7f;
  --color-petite-pink-600: #7a6566;
  --color-petite-pink-700: #624f50;
  --color-petite-pink-800: #4e3d3e;
  --color-petite-pink-900: #3d2f2f;
  --color-petite-pink-950: #261c1d;
  --color-after-the-storm: #3a6065;
  --color-after-the-storm-50: #e4fafd;
  --color-after-the-storm-100: #d7f1f4;
  --color-after-the-storm-200: #c1dfe3;
  --color-after-the-storm-300: #a7cace;
  --color-after-the-storm-400: #85abb1;
  --color-after-the-storm-500: #699196;
  --color-after-the-storm-600: #50767b;
  --color-after-the-storm-700: #3a6065;
  --color-after-the-storm-800: #2c4b4f;
  --color-after-the-storm-900: #1f3a3d;
  --color-after-the-storm-950: #112427;
  --color-opium: #937678;
  --color-opium-50: #ffeff0;
  --color-opium-100: #f8e2e4;
  --color-opium-200: #e5ccce;
  --color-opium-300: #cfb4b5;
  --color-opium-400: #b09294;
  --color-opium-500: #937678;
  --color-opium-600: #795e60;
  --color-opium-700: #61494b;
  --color-opium-800: #4e393a;
  --color-opium-900: #3d2b2d;
  --color-opium-950: #271a1b;
}