Warmth of Teamwork

CSS

:root {
  --warmth-of-teamwork: #803020;
  --warmth-of-teamwork-rgb: 128 48 32;
  --warmth-of-teamwork-oklch: oklch(0.421 0.115 33.1);
}

.element {
  color: var(--warmth-of-teamwork);
  background-color: hsl(10 60% 31%);
  border-color: oklch(0.421 0.115 33.1);
}

Tailwind CSS v4

@theme {
  --color-warmth-of-teamwork: #803020;
  --color-warmth-of-teamwork-50: #ffeadf;
  --color-warmth-of-teamwork-100: #ffdbce;
  --color-warmth-of-teamwork-200: #ffc3b3;
  --color-warmth-of-teamwork-300: #eca290;
  --color-warmth-of-teamwork-400: #d98472;
  --color-warmth-of-teamwork-500: #c66753;
  --color-warmth-of-teamwork-600: #a75747;
  --color-warmth-of-teamwork-700: #864638;
  --color-warmth-of-teamwork-800: #643229;
  --color-warmth-of-teamwork-900: #46221c;
  --color-warmth-of-teamwork-950: #2d110c;
}

SCSS

$warmth-of-teamwork: #803020;
$warmth-of-teamwork-rgb: 128, 48, 32;
$warmth-of-teamwork-light: mix(#fff, $warmth-of-teamwork, 20%);
$warmth-of-teamwork-dark: mix(#000, $warmth-of-teamwork, 20%);

.element {
  color: $warmth-of-teamwork;
  box-shadow: 0 0 0 2px rgba($warmth-of-teamwork, 0.35);
}