Disappearing Purple

CSS

:root {
  --disappearing-purple: #3f313a;
  --disappearing-purple-rgb: 63 49 58;
  --disappearing-purple-oklch: oklch(0.332 0.025 339.8);
}

.element {
  color: var(--disappearing-purple);
  background-color: hsl(321 13% 22%);
  border-color: oklch(0.332 0.025 339.8);
}

Tailwind CSS v4

@theme {
  --color-disappearing-purple: #3f313a;
  --color-disappearing-purple-50: #fbf2f7;
  --color-disappearing-purple-100: #eee5ea;
  --color-disappearing-purple-200: #dcd0d7;
  --color-disappearing-purple-300: #c1b3bb;
  --color-disappearing-purple-400: #a999a3;
  --color-disappearing-purple-500: #92808b;
  --color-disappearing-purple-600: #7c6c76;
  --color-disappearing-purple-700: #63575e;
  --color-disappearing-purple-800: #483f45;
  --color-disappearing-purple-900: #322b30;
  --color-disappearing-purple-950: #1e191c;
}

SCSS

$disappearing-purple: #3f313a;
$disappearing-purple-rgb: 63, 49, 58;
$disappearing-purple-light: mix(#fff, $disappearing-purple, 20%);
$disappearing-purple-dark: mix(#000, $disappearing-purple, 20%);

.element {
  color: $disappearing-purple;
  box-shadow: 0 0 0 2px rgba($disappearing-purple, 0.35);
}