Bear Creek

CSS

:root {
  --bear-creek: #836452;
  --bear-creek-rgb: 131 100 82;
  --bear-creek-oklch: oklch(0.53 0.049 51.5);
}

.element {
  color: var(--bear-creek);
  background-color: hsl(22 23% 42%);
  border-color: oklch(0.53 0.049 51.5);
}

Tailwind CSS v4

@theme {
  --color-bear-creek: #836452;
  --color-bear-creek-50: #fff2e9;
  --color-bear-creek-100: #f6e4d9;
  --color-bear-creek-200: #e6cfc1;
  --color-bear-creek-300: #ccb1a1;
  --color-bear-creek-400: #b79785;
  --color-bear-creek-500: #a17d69;
  --color-bear-creek-600: #886a59;
  --color-bear-creek-700: #6d5547;
  --color-bear-creek-800: #513e33;
  --color-bear-creek-900: #382a23;
  --color-bear-creek-950: #231812;
}

SCSS

$bear-creek: #836452;
$bear-creek-rgb: 131, 100, 82;
$bear-creek-light: mix(#fff, $bear-creek, 20%);
$bear-creek-dark: mix(#000, $bear-creek, 20%);

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