Roses in the Snow

CSS

:root {
  --roses-in-the-snow: #e7aecd;
  --roses-in-the-snow-rgb: 231 174 205;
  --roses-in-the-snow-oklch: oklch(0.812 0.077 345.1);
}

.element {
  color: var(--roses-in-the-snow);
  background-color: hsl(327 54% 79%);
  border-color: oklch(0.812 0.077 345.1);
}

Tailwind CSS v4

@theme {
  --color-roses-in-the-snow: #e7aecd;
  --color-roses-in-the-snow-50: #ffedf9;
  --color-roses-in-the-snow-100: #fddeed;
  --color-roses-in-the-snow-200: #eec7db;
  --color-roses-in-the-snow-300: #d6a8bf;
  --color-roses-in-the-snow-400: #c08ca9;
  --color-roses-in-the-snow-500: #ab7192;
  --color-roses-in-the-snow-600: #91607b;
  --color-roses-in-the-snow-700: #744d63;
  --color-roses-in-the-snow-800: #553849;
  --color-roses-in-the-snow-900: #3c2633;
  --color-roses-in-the-snow-950: #25141f;
}

SCSS

$roses-in-the-snow: #e7aecd;
$roses-in-the-snow-rgb: 231, 174, 205;
$roses-in-the-snow-light: mix(#fff, $roses-in-the-snow, 20%);
$roses-in-the-snow-dark: mix(#000, $roses-in-the-snow, 20%);

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