Plum’s the Word

CSS

:root {
  --plum-s-the-word: #dacee8;
  --plum-s-the-word-rgb: 218 206 232;
  --plum-s-the-word-oklch: oklch(0.869 0.038 306.4);
}

.element {
  color: var(--plum-s-the-word);
  background-color: hsl(268 36% 86%);
  border-color: oklch(0.869 0.038 306.4);
}

Tailwind CSS v4

@theme {
  --color-plum-s-the-word: #dacee8;
  --color-plum-s-the-word-50: #f8f2fe;
  --color-plum-s-the-word-100: #ebe5f2;
  --color-plum-s-the-word-200: #d9d0e1;
  --color-plum-s-the-word-300: #bdb3c7;
  --color-plum-s-the-word-400: #a499b0;
  --color-plum-s-the-word-500: #8c809a;
  --color-plum-s-the-word-600: #776c82;
  --color-plum-s-the-word-700: #5f5768;
  --color-plum-s-the-word-800: #453f4d;
  --color-plum-s-the-word-900: #302c36;
  --color-plum-s-the-word-950: #1c1921;
}

SCSS

$plum-s-the-word: #dacee8;
$plum-s-the-word-rgb: 218, 206, 232;
$plum-s-the-word-light: mix(#fff, $plum-s-the-word, 20%);
$plum-s-the-word-dark: mix(#000, $plum-s-the-word, 20%);

.element {
  color: $plum-s-the-word;
  box-shadow: 0 0 0 2px rgba($plum-s-the-word, 0.35);
}