Before Winter

CSS

:root {
  --before-winter: #bd6f56;
  --before-winter-rgb: 189 111 86;
  --before-winter-oklch: oklch(0.622 0.106 38.5);
}

.element {
  color: var(--before-winter);
  background-color: hsl(15 44% 54%);
  border-color: oklch(0.622 0.106 38.5);
}

Tailwind CSS v4

@theme {
  --color-before-winter: #bd6f56;
  --color-before-winter-50: #ffecdf;
  --color-before-winter-100: #ffddcd;
  --color-before-winter-200: #fdc6b2;
  --color-before-winter-300: #e7a58e;
  --color-before-winter-400: #d48870;
  --color-before-winter-500: #c16b50;
  --color-before-winter-600: #a35b44;
  --color-before-winter-700: #834936;
  --color-before-winter-800: #613427;
  --color-before-winter-900: #44241a;
  --color-before-winter-950: #2c120b;
}

SCSS

$before-winter: #bd6f56;
$before-winter-rgb: 189, 111, 86;
$before-winter-light: mix(#fff, $before-winter, 20%);
$before-winter-dark: mix(#000, $before-winter, 20%);

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