Say It With Red Roses

CSS

:root {
  --say-it-with-red-roses: #c7111e;
  --say-it-with-red-roses-rgb: 199 17 30;
  --say-it-with-red-roses-oklch: oklch(0.527 0.207 26.3);
}

.element {
  color: var(--say-it-with-red-roses);
  background-color: hsl(356 84% 42%);
  border-color: oklch(0.527 0.207 26.3);
}

Tailwind CSS v4

@theme {
  --color-say-it-with-red-roses: #c7111e;
  --color-say-it-with-red-roses-50: #ffdfd4;
  --color-say-it-with-red-roses-100: #ffcec1;
  --color-say-it-with-red-roses-200: #ffb1a2;
  --color-say-it-with-red-roses-300: #ff8979;
  --color-say-it-with-red-roses-400: #ff6159;
  --color-say-it-with-red-roses-500: #f12d31;
  --color-say-it-with-red-roses-600: #cb2a2b;
  --color-say-it-with-red-roses-700: #a42222;
  --color-say-it-with-red-roses-800: #7a161b;
  --color-say-it-with-red-roses-900: #570e11;
  --color-say-it-with-red-roses-950: #3a0004;
}

SCSS

$say-it-with-red-roses: #c7111e;
$say-it-with-red-roses-rgb: 199, 17, 30;
$say-it-with-red-roses-light: mix(#fff, $say-it-with-red-roses, 20%);
$say-it-with-red-roses-dark: mix(#000, $say-it-with-red-roses, 20%);

.element {
  color: $say-it-with-red-roses;
  box-shadow: 0 0 0 2px rgba($say-it-with-red-roses, 0.35);
}