Red Rooster

CSS

:root {
  --red-rooster: #7e5146;
  --red-rooster-rgb: 126 81 70;
  --red-rooster-oklch: oklch(0.482 0.064 34.4);
}

.element {
  color: var(--red-rooster);
  background-color: hsl(12 29% 38%);
  border-color: oklch(0.482 0.064 34.4);
}

Tailwind CSS v4

@theme {
  --color-red-rooster: #7e5146;
  --color-red-rooster-50: #ffefe9;
  --color-red-rooster-100: #fce1d9;
  --color-red-rooster-200: #eecbc2;
  --color-red-rooster-300: #d6ada1;
  --color-red-rooster-400: #c19186;
  --color-red-rooster-500: #ac776a;
  --color-red-rooster-600: #91655a;
  --color-red-rooster-700: #755148;
  --color-red-rooster-800: #563a34;
  --color-red-rooster-900: #3c2824;
  --color-red-rooster-950: #261613;
}

SCSS

$red-rooster: #7e5146;
$red-rooster-rgb: 126, 81, 70;
$red-rooster-light: mix(#fff, $red-rooster, 20%);
$red-rooster-dark: mix(#000, $red-rooster, 20%);

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