Beer Glazed Bacon

CSS

:root {
  --beer-glazed-bacon: #773311;
  --beer-glazed-bacon-rgb: 119 51 17;
  --beer-glazed-bacon-oklch: oklch(0.409 0.105 43.9);
}

.element {
  color: var(--beer-glazed-bacon);
  background-color: hsl(20 75% 27%);
  border-color: oklch(0.409 0.105 43.9);
}

Tailwind CSS v4

@theme {
  --color-beer-glazed-bacon: #773311;
  --color-beer-glazed-bacon-50: #ffeddc;
  --color-beer-glazed-bacon-100: #ffdecb;
  --color-beer-glazed-bacon-200: #fbc7af;
  --color-beer-glazed-bacon-300: #e5a78a;
  --color-beer-glazed-bacon-400: #d38a6a;
  --color-beer-glazed-bacon-500: #bf6d49;
  --color-beer-glazed-bacon-600: #a25d3f;
  --color-beer-glazed-bacon-700: #824a32;
  --color-beer-glazed-bacon-800: #613524;
  --color-beer-glazed-bacon-900: #442418;
  --color-beer-glazed-bacon-950: #2c1309;
}

SCSS

$beer-glazed-bacon: #773311;
$beer-glazed-bacon-rgb: 119, 51, 17;
$beer-glazed-bacon-light: mix(#fff, $beer-glazed-bacon, 20%);
$beer-glazed-bacon-dark: mix(#000, $beer-glazed-bacon, 20%);

.element {
  color: $beer-glazed-bacon;
  box-shadow: 0 0 0 2px rgba($beer-glazed-bacon, 0.35);
}