Red Stage

CSS

:root {
  --red-stage: #ad522e;
  --red-stage-rgb: 173 82 46;
  --red-stage-oklch: oklch(0.546 0.129 41.2);
}

.element {
  color: var(--red-stage);
  background-color: hsl(17 58% 43%);
  border-color: oklch(0.546 0.129 41.2);
}

Tailwind CSS v4

@theme {
  --color-red-stage: #ad522e;
  --color-red-stage-50: #ffead8;
  --color-red-stage-100: #ffdbc6;
  --color-red-stage-200: #ffc3a8;
  --color-red-stage-300: #f0a281;
  --color-red-stage-400: #de8360;
  --color-red-stage-500: #cb643c;
  --color-red-stage-600: #ac5534;
  --color-red-stage-700: #8a4429;
  --color-red-stage-800: #67301e;
  --color-red-stage-900: #482113;
  --color-red-stage-950: #2f1006;
}

SCSS

$red-stage: #ad522e;
$red-stage-rgb: 173, 82, 46;
$red-stage-light: mix(#fff, $red-stage, 20%);
$red-stage-dark: mix(#000, $red-stage, 20%);

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