#9C2233

CSS

:root {
  --petal-of-a-dying-rose: #9c2233;
  --petal-of-a-dying-rose-rgb: 156 34 51;
  --petal-of-a-dying-rose-oklch: oklch(0.458 0.157 18.9);
}

.element {
  color: var(--petal-of-a-dying-rose);
  background-color: hsl(352 64% 37%);
  border-color: oklch(0.458 0.157 18.9);
}

Tailwind CSS v4

@theme {
  --color-petal-of-a-dying-rose: #9c2233;
  --color-petal-of-a-dying-rose-50: #ffe4e2;
  --color-petal-of-a-dying-rose-100: #ffd4d1;
  --color-petal-of-a-dying-rose-200: #ffbab7;
  --color-petal-of-a-dying-rose-300: #fd9695;
  --color-petal-of-a-dying-rose-400: #ec7479;
  --color-petal-of-a-dying-rose-500: #da505c;
  --color-petal-of-a-dying-rose-600: #b8454e;
  --color-petal-of-a-dying-rose-700: #94373e;
  --color-petal-of-a-dying-rose-800: #6e272e;
  --color-petal-of-a-dying-rose-900: #4e1a1f;
  --color-petal-of-a-dying-rose-950: #33090f;
}

SCSS

$petal-of-a-dying-rose: #9c2233;
$petal-of-a-dying-rose-rgb: 156, 34, 51;
$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);
}