#DD6A5E

CSS

:root {
  --track-and-field: #dd6a5e;
  --track-and-field-rgb: 221 106 94;
  --track-and-field-oklch: oklch(0.659 0.146 27.8);
}

.element {
  color: var(--track-and-field);
  background-color: hsl(6 65% 62%);
  border-color: oklch(0.659 0.146 27.8);
}

Tailwind CSS v4

@theme {
  --color-track-and-field: #dd6a5e;
  --color-track-and-field-50: #ffe6dd;
  --color-track-and-field-100: #ffd6cb;
  --color-track-and-field-200: #ffbdb0;
  --color-track-and-field-300: #f99a8b;
  --color-track-and-field-400: #e8796d;
  --color-track-and-field-500: #d6584d;
  --color-track-and-field-600: #b44b42;
  --color-track-and-field-700: #913c34;
  --color-track-and-field-800: #6c2a27;
  --color-track-and-field-900: #4c1d1a;
  --color-track-and-field-950: #320c0a;
}

SCSS

$track-and-field: #dd6a5e;
$track-and-field-rgb: 221, 106, 94;
$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);
}