Red Obsession

CSS

:root {
  --red-obsession: #b63731;
  --red-obsession-rgb: 182 55 49;
  --red-obsession-oklch: oklch(0.525 0.164 27.1);
}

.element {
  color: var(--red-obsession);
  background-color: hsl(3 58% 45%);
  border-color: oklch(0.525 0.164 27.1);
}

Tailwind CSS v4

@theme {
  --color-red-obsession: #b63731;
  --color-red-obsession-50: #ffe4da;
  --color-red-obsession-100: #ffd4c8;
  --color-red-obsession-200: #ffbaac;
  --color-red-obsession-300: #ff9586;
  --color-red-obsession-400: #f07367;
  --color-red-obsession-500: #de4e46;
  --color-red-obsession-600: #bb443c;
  --color-red-obsession-700: #97362f;
  --color-red-obsession-800: #712523;
  --color-red-obsession-900: #4f1917;
  --color-red-obsession-950: #340909;
}

SCSS

$red-obsession: #b63731;
$red-obsession-rgb: 182, 55, 49;
$red-obsession-light: mix(#fff, $red-obsession, 20%);
$red-obsession-dark: mix(#000, $red-obsession, 20%);

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