Whisper of Plum

CSS

:root {
  --whisper-of-plum: #d4afda;
  --whisper-of-plum-rgb: 212 175 218;
  --whisper-of-plum-oklch: oklch(0.8 0.072 321.6);
}

.element {
  color: var(--whisper-of-plum);
  background-color: hsl(292 37% 77%);
  border-color: oklch(0.8 0.072 321.6);
}

Tailwind CSS v4

@theme {
  --color-whisper-of-plum: #d4afda;
  --color-whisper-of-plum-50: #ffefff;
  --color-whisper-of-plum-100: #f4e0f6;
  --color-whisper-of-plum-200: #e4cae6;
  --color-whisper-of-plum-300: #caabcd;
  --color-whisper-of-plum-400: #b391b8;
  --color-whisper-of-plum-500: #9d76a3;
  --color-whisper-of-plum-600: #84648a;
  --color-whisper-of-plum-700: #6a506e;
  --color-whisper-of-plum-800: #4d3a52;
  --color-whisper-of-plum-900: #362839;
  --color-whisper-of-plum-950: #211624;
}

SCSS

$whisper-of-plum: #d4afda;
$whisper-of-plum-rgb: 212, 175, 218;
$whisper-of-plum-light: mix(#fff, $whisper-of-plum, 20%);
$whisper-of-plum-dark: mix(#000, $whisper-of-plum, 20%);

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