Roman

CSS

:root {
  --roman: #d8625b;
  --roman-rgb: 216 98 91;
  --roman-oklch: oklch(0.64 0.15 25.6);
}

.element {
  color: var(--roman);
  background-color: hsl(3 62% 60%);
  border-color: oklch(0.64 0.15 25.6);
}

Tailwind CSS v4

@theme {
  --color-roman: #d8625b;
  --color-roman-50: #ffe6de;
  --color-roman-100: #ffd6cd;
  --color-roman-200: #ffbcb1;
  --color-roman-300: #fb998d;
  --color-roman-400: #ea786f;
  --color-roman-500: #d75550;
  --color-roman-600: #b64944;
  --color-roman-700: #923a36;
  --color-roman-800: #6d2928;
  --color-roman-900: #4d1c1b;
  --color-roman-950: #320b0b;
}

SCSS

$roman: #d8625b;
$roman-rgb: 216, 98, 91;
$roman-light: mix(#fff, $roman, 20%);
$roman-dark: mix(#000, $roman, 20%);

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