Cherish the Moment

CSS

:root {
  --cherish-the-moment: #ccacd7;
  --cherish-the-moment-rgb: 204 172 215;
  --cherish-the-moment-oklch: oklch(0.786 0.069 317.4);
}

.element {
  color: var(--cherish-the-moment);
  background-color: hsl(285 35% 76%);
  border-color: oklch(0.786 0.069 317.4);
}

Tailwind CSS v4

@theme {
  --color-cherish-the-moment: #ccacd7;
  --color-cherish-the-moment-50: #feefff;
  --color-cherish-the-moment-100: #f2e1f7;
  --color-cherish-the-moment-200: #e2cbe7;
  --color-cherish-the-moment-300: #c7adce;
  --color-cherish-the-moment-400: #b092ba;
  --color-cherish-the-moment-500: #9978a5;
  --color-cherish-the-moment-600: #82668b;
  --color-cherish-the-moment-700: #68516f;
  --color-cherish-the-moment-800: #4c3b53;
  --color-cherish-the-moment-900: #35293a;
  --color-cherish-the-moment-950: #201624;
}

SCSS

$cherish-the-moment: #ccacd7;
$cherish-the-moment-rgb: 204, 172, 215;
$cherish-the-moment-light: mix(#fff, $cherish-the-moment, 20%);
$cherish-the-moment-dark: mix(#000, $cherish-the-moment, 20%);

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