#AB3D5C

CSS

:root {
  --cry-of-a-rose: #ab3d5c;
  --cry-of-a-rose-rgb: 171 61 92;
  --cry-of-a-rose-oklch: oklch(0.522 0.146 6.4);
}

.element {
  color: var(--cry-of-a-rose);
  background-color: hsl(343 47% 45%);
  border-color: oklch(0.522 0.146 6.4);
}

Tailwind CSS v4

@theme {
  --color-cry-of-a-rose: #ab3d5c;
  --color-cry-of-a-rose-50: #ffe5ed;
  --color-cry-of-a-rose-100: #ffd4de;
  --color-cry-of-a-rose-200: #ffbbc8;
  --color-cry-of-a-rose-300: #f797a9;
  --color-cry-of-a-rose-400: #e57791;
  --color-cry-of-a-rose-500: #d25577;
  --color-cry-of-a-rose-600: #b24964;
  --color-cry-of-a-rose-700: #8f3a50;
  --color-cry-of-a-rose-800: #6a293c;
  --color-cry-of-a-rose-900: #4b1c29;
  --color-cry-of-a-rose-950: #310b17;
}

SCSS

$cry-of-a-rose: #ab3d5c;
$cry-of-a-rose-rgb: 171, 61, 92;
$cry-of-a-rose-light: mix(#fff, $cry-of-a-rose, 20%);
$cry-of-a-rose-dark: mix(#000, $cry-of-a-rose, 20%);

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