Red Gravy

CSS

:root {
  --red-gravy: #b83312;
  --red-gravy-rgb: 184 51 18;
  --red-gravy-oklch: oklch(0.521 0.175 34.2);
}

.element {
  color: var(--red-gravy);
  background-color: hsl(12 82% 40%);
  border-color: oklch(0.521 0.175 34.2);
}

Tailwind CSS v4

@theme {
  --color-red-gravy: #b83312;
  --color-red-gravy-50: #ffe4d3;
  --color-red-gravy-100: #ffd4c0;
  --color-red-gravy-200: #ffb9a0;
  --color-red-gravy-300: #ff9577;
  --color-red-gravy-400: #f37254;
  --color-red-gravy-500: #e24c29;
  --color-red-gravy-600: #bf4225;
  --color-red-gravy-700: #99341d;
  --color-red-gravy-800: #732416;
  --color-red-gravy-900: #51180e;
  --color-red-gravy-950: #360803;
}

SCSS

$red-gravy: #b83312;
$red-gravy-rgb: 184, 51, 18;
$red-gravy-light: mix(#fff, $red-gravy, 20%);
$red-gravy-dark: mix(#000, $red-gravy, 20%);

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