Vermilion Red

CSS

:root {
  --vermilion-red: #b5493a;
  --vermilion-red-rgb: 181 73 58;
  --vermilion-red-oklch: oklch(0.546 0.144 30.3);
}

.element {
  color: var(--vermilion-red);
  background-color: hsl(7 51% 47%);
  border-color: oklch(0.546 0.144 30.3);
}

Tailwind CSS v4

@theme {
  --color-vermilion-red: #b5493a;
  --color-vermilion-red-50: #ffe7dc;
  --color-vermilion-red-100: #ffd7ca;
  --color-vermilion-red-200: #ffbeae;
  --color-vermilion-red-300: #f89b88;
  --color-vermilion-red-400: #e77b6a;
  --color-vermilion-red-500: #d45a49;
  --color-vermilion-red-600: #b34d3e;
  --color-vermilion-red-700: #903d31;
  --color-vermilion-red-800: #6b2b25;
  --color-vermilion-red-900: #4c1d18;
  --color-vermilion-red-950: #320d09;
}

SCSS

$vermilion-red: #b5493a;
$vermilion-red-rgb: 181, 73, 58;
$vermilion-red-light: mix(#fff, $vermilion-red, 20%);
$vermilion-red-dark: mix(#000, $vermilion-red, 20%);

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