#CD0F2D

CSS

:root {
  --vermilion-scarlet: #cd0f2d;
  --vermilion-scarlet-rgb: 205 15 45;
  --vermilion-scarlet-oklch: oklch(0.539 0.212 22.9);
}

.element {
  color: var(--vermilion-scarlet);
  background-color: hsl(351 86% 43%);
  border-color: oklch(0.539 0.212 22.9);
}

Tailwind CSS v4

@theme {
  --color-vermilion-scarlet: #cd0f2d;
  --color-vermilion-scarlet-50: #ffded7;
  --color-vermilion-scarlet-100: #ffccc4;
  --color-vermilion-scarlet-200: #ffafa6;
  --color-vermilion-scarlet-300: #ff877f;
  --color-vermilion-scarlet-400: #ff5d61;
  --color-vermilion-scarlet-500: #f3253d;
  --color-vermilion-scarlet-600: #cd2434;
  --color-vermilion-scarlet-700: #a51e2a;
  --color-vermilion-scarlet-800: #7b1220;
  --color-vermilion-scarlet-900: #570c15;
  --color-vermilion-scarlet-950: #3a0007;
}

SCSS

$vermilion-scarlet: #cd0f2d;
$vermilion-scarlet-rgb: 205, 15, 45;
$vermilion-scarlet-light: mix(#fff, $vermilion-scarlet, 20%);
$vermilion-scarlet-dark: mix(#000, $vermilion-scarlet, 20%);

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