Petal of a Dying Rose

CSS

:root {
  --petal-of-a-dying-rose: #9f0630;
  --petal-of-a-dying-rose-rgb: 159 6 48;
  --petal-of-a-dying-rose-oklch: oklch(0.448 0.176 16.7);
}

.element {
  color: var(--petal-of-a-dying-rose);
  background-color: hsl(344 93% 32%);
  border-color: oklch(0.448 0.176 16.7);
}

Tailwind CSS v4

@theme {
  --color-petal-of-a-dying-rose: #9f0630;
  --color-petal-of-a-dying-rose-50: #ffe2e2;
  --color-petal-of-a-dying-rose-100: #ffd1d1;
  --color-petal-of-a-dying-rose-200: #ffb5b7;
  --color-petal-of-a-dying-rose-300: #ff9094;
  --color-petal-of-a-dying-rose-400: #f46c79;
  --color-petal-of-a-dying-rose-500: #e2445b;
  --color-petal-of-a-dying-rose-600: #bf3b4e;
  --color-petal-of-a-dying-rose-700: #9a2f3e;
  --color-petal-of-a-dying-rose-800: #73212f;
  --color-petal-of-a-dying-rose-900: #51161f;
  --color-petal-of-a-dying-rose-950: #36060f;
}

SCSS

$petal-of-a-dying-rose: #9f0630;
$petal-of-a-dying-rose-rgb: 159, 6, 48;
$petal-of-a-dying-rose-light: mix(#fff, $petal-of-a-dying-rose, 20%);
$petal-of-a-dying-rose-dark: mix(#000, $petal-of-a-dying-rose, 20%);

.element {
  color: $petal-of-a-dying-rose;
  box-shadow: 0 0 0 2px rgba($petal-of-a-dying-rose, 0.35);
}