#A192CD

CSS

:root {
  --petrified-purple: #a192cd;
  --petrified-purple-rgb: 161 146 205;
  --petrified-purple-oklch: oklch(0.695 0.087 295.7);
}

.element {
  color: var(--petrified-purple);
  background-color: hsl(255 37% 69%);
  border-color: oklch(0.695 0.087 295.7);
}

Tailwind CSS v4

@theme {
  --color-petrified-purple: #a192cd;
  --color-petrified-purple-50: #f8f0ff;
  --color-petrified-purple-100: #ebe2ff;
  --color-petrified-purple-200: #d8cdf5;
  --color-petrified-purple-300: #bcaedf;
  --color-petrified-purple-400: #a294cc;
  --color-petrified-purple-500: #8b7ab9;
  --color-petrified-purple-600: #76679c;
  --color-petrified-purple-700: #5e537e;
  --color-petrified-purple-800: #443c5e;
  --color-petrified-purple-900: #2f2a42;
  --color-petrified-purple-950: #1b172a;
}

SCSS

$petrified-purple: #a192cd;
$petrified-purple-rgb: 161, 146, 205;
$petrified-purple-light: mix(#fff, $petrified-purple, 20%);
$petrified-purple-dark: mix(#000, $petrified-purple, 20%);

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