Red Hot Jazz

CSS

:root {
  --red-hot-jazz: #773c31;
  --red-hot-jazz-rgb: 119 60 49;
  --red-hot-jazz-oklch: oklch(0.429 0.085 31.8);
}

.element {
  color: var(--red-hot-jazz);
  background-color: hsl(9 42% 33%);
  border-color: oklch(0.429 0.085 31.8);
}

Tailwind CSS v4

@theme {
  --color-red-hot-jazz: #773c31;
  --color-red-hot-jazz-50: #ffede5;
  --color-red-hot-jazz-100: #ffded6;
  --color-red-hot-jazz-200: #f6c8bd;
  --color-red-hot-jazz-300: #dfa89b;
  --color-red-hot-jazz-400: #cc8c7f;
  --color-red-hot-jazz-500: #b87062;
  --color-red-hot-jazz-600: #9b5f54;
  --color-red-hot-jazz-700: #7c4c43;
  --color-red-hot-jazz-800: #5c3731;
  --color-red-hot-jazz-900: #412521;
  --color-red-hot-jazz-950: #291410;
}

SCSS

$red-hot-jazz: #773c31;
$red-hot-jazz-rgb: 119, 60, 49;
$red-hot-jazz-light: mix(#fff, $red-hot-jazz, 20%);
$red-hot-jazz-dark: mix(#000, $red-hot-jazz, 20%);

.element {
  color: $red-hot-jazz;
  box-shadow: 0 0 0 2px rgba($red-hot-jazz, 0.35);
}