Track and Field

CSS

:root {
  --track-and-field: #d66352;
  --track-and-field-rgb: 214 99 82;
  --track-and-field-oklch: oklch(0.637 0.148 30.3);
}

.element {
  color: var(--track-and-field);
  background-color: hsl(8 62% 58%);
  border-color: oklch(0.637 0.148 30.3);
}

Tailwind CSS v4

@theme {
  --color-track-and-field: #d66352;
  --color-track-and-field-50: #ffe7db;
  --color-track-and-field-100: #ffd7c9;
  --color-track-and-field-200: #ffbdac;
  --color-track-and-field-300: #fa9a87;
  --color-track-and-field-400: #e97968;
  --color-track-and-field-500: #d65846;
  --color-track-and-field-600: #b54b3c;
  --color-track-and-field-700: #923c30;
  --color-track-and-field-800: #6d2a23;
  --color-track-and-field-900: #4d1c17;
  --color-track-and-field-950: #320c09;
}

SCSS

$track-and-field: #d66352;
$track-and-field-rgb: 214, 99, 82;
$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);
}