#DC6758

CSS

:root {
  --track-and-field: #dc6758;
  --track-and-field-rgb: 220 103 88;
  --track-and-field-oklch: oklch(0.652 0.15 29.2);
}

.element {
  color: var(--track-and-field);
  background-color: hsl(7 65% 60%);
  border-color: oklch(0.652 0.15 29.2);
}

Tailwind CSS v4

@theme {
  --color-track-and-field: #dc6758;
  --color-track-and-field-50: #ffe6db;
  --color-track-and-field-100: #ffd6ca;
  --color-track-and-field-200: #ffbdad;
  --color-track-and-field-300: #fa9a88;
  --color-track-and-field-400: #e97969;
  --color-track-and-field-500: #d75748;
  --color-track-and-field-600: #b64a3e;
  --color-track-and-field-700: #923b31;
  --color-track-and-field-800: #6d2a24;
  --color-track-and-field-900: #4d1c18;
  --color-track-and-field-950: #320b09;
}

SCSS

$track-and-field: #dc6758;
$track-and-field-rgb: 220, 103, 88;
$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);
}