Medium Scarlet

CSS

:root {
  --medium-scarlet: #fc2847;
  --medium-scarlet-rgb: 252 40 71;
  --medium-scarlet-oklch: oklch(0.639 0.239 21);
}

.element {
  color: var(--medium-scarlet);
  background-color: hsl(351 97% 57%);
  border-color: oklch(0.639 0.239 21);
}

Tailwind CSS v4

@theme {
  --color-medium-scarlet: #fc2847;
  --color-medium-scarlet-50: #ffdbd5;
  --color-medium-scarlet-100: #ffc8c2;
  --color-medium-scarlet-200: #ffa9a4;
  --color-medium-scarlet-300: #ff7d7c;
  --color-medium-scarlet-400: #ff4d5d;
  --color-medium-scarlet-500: #fe0038;
  --color-medium-scarlet-600: #d60031;
  --color-medium-scarlet-700: #ad0027;
  --color-medium-scarlet-800: #81001e;
  --color-medium-scarlet-900: #5b0114;
  --color-medium-scarlet-950: #3e0006;
}

SCSS

$medium-scarlet: #fc2847;
$medium-scarlet-rgb: 252, 40, 71;
$medium-scarlet-light: mix(#fff, $medium-scarlet, 20%);
$medium-scarlet-dark: mix(#000, $medium-scarlet, 20%);

.element {
  color: $medium-scarlet;
  box-shadow: 0 0 0 2px rgba($medium-scarlet, 0.35);
}