Purple Passage

CSS

:root {
  --purple-passage: #645e77;
  --purple-passage-rgb: 100 94 119;
  --purple-passage-oklch: oklch(0.497 0.04 295.9);
}

.element {
  color: var(--purple-passage);
  background-color: hsl(254 12% 42%);
  border-color: oklch(0.497 0.04 295.9);
}

Tailwind CSS v4

@theme {
  --color-purple-passage: #645e77;
  --color-purple-passage-50: #f6f3ff;
  --color-purple-passage-100: #e9e5f4;
  --color-purple-passage-200: #d6d1e4;
  --color-purple-passage-300: #b9b3ca;
  --color-purple-passage-400: #a09ab4;
  --color-purple-passage-500: #88819e;
  --color-purple-passage-600: #736d86;
  --color-purple-passage-700: #5c576b;
  --color-purple-passage-800: #43404f;
  --color-purple-passage-900: #2e2c37;
  --color-purple-passage-950: #1b1922;
}

SCSS

$purple-passage: #645e77;
$purple-passage-rgb: 100, 94, 119;
$purple-passage-light: mix(#fff, $purple-passage, 20%);
$purple-passage-dark: mix(#000, $purple-passage, 20%);

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