#D8695B

CSS

:root {
  --track-and-field: #d8695b;
  --track-and-field-rgb: 216 105 91;
  --track-and-field-oklch: oklch(0.65 0.142 28.9);
}

.element {
  color: var(--track-and-field);
  background-color: hsl(7 62% 60%);
  border-color: oklch(0.65 0.142 28.9);
}

Tailwind CSS v4

@theme {
  --color-track-and-field: #d8695b;
  --color-track-and-field-50: #ffe7dd;
  --color-track-and-field-100: #ffd7cb;
  --color-track-and-field-200: #ffbeaf;
  --color-track-and-field-300: #f79b8b;
  --color-track-and-field-400: #e67b6d;
  --color-track-and-field-500: #d45a4c;
  --color-track-and-field-600: #b34d41;
  --color-track-and-field-700: #903d34;
  --color-track-and-field-800: #6b2b26;
  --color-track-and-field-900: #4c1d1a;
  --color-track-and-field-950: #310d0a;
}

SCSS

$track-and-field: #d8695b;
$track-and-field-rgb: 216, 105, 91;
$track-and-field-light: mix(#fff, $track-and-field, 20%);
$track-and-field-dark: mix(#000, $track-and-field, 20%);

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