Take the Plunge

CSS

:root {
  --take-the-plunge: #d8d4dd;
  --take-the-plunge-rgb: 216 212 221;
  --take-the-plunge-oklch: oklch(0.876 0.013 306);
}

.element {
  color: var(--take-the-plunge);
  background-color: hsl(267 12% 85%);
  border-color: oklch(0.876 0.013 306);
}

Tailwind CSS v4

@theme {
  --color-take-the-plunge: #d8d4dd;
  --color-take-the-plunge-50: #f6f4f8;
  --color-take-the-plunge-100: #e9e7eb;
  --color-take-the-plunge-200: #d6d3d9;
  --color-take-the-plunge-300: #b9b6bd;
  --color-take-the-plunge-400: #a09da5;
  --color-take-the-plunge-500: #88848d;
  --color-take-the-plunge-600: #737077;
  --color-take-the-plunge-700: #5c5960;
  --color-take-the-plunge-800: #434146;
  --color-take-the-plunge-900: #2e2d30;
  --color-take-the-plunge-950: #1b1a1d;
}

SCSS

$take-the-plunge: #d8d4dd;
$take-the-plunge-rgb: 216, 212, 221;
$take-the-plunge-light: mix(#fff, $take-the-plunge, 20%);
$take-the-plunge-dark: mix(#000, $take-the-plunge, 20%);

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