Little Bear

CSS

:root {
  --little-bear: #604b42;
  --little-bear-rgb: 96 75 66;
  --little-bear-oklch: oklch(0.432 0.032 44.4);
}

.element {
  color: var(--little-bear);
  background-color: hsl(18 19% 32%);
  border-color: oklch(0.432 0.032 44.4);
}

Tailwind CSS v4

@theme {
  --color-little-bear: #604b42;
  --color-little-bear-50: #fef3ee;
  --color-little-bear-100: #f2e5df;
  --color-little-bear-200: #e1d0c9;
  --color-little-bear-300: #c6b3aa;
  --color-little-bear-400: #b0998f;
  --color-little-bear-500: #998075;
  --color-little-bear-600: #826c63;
  --color-little-bear-700: #68574f;
  --color-little-bear-800: #4c3f3a;
  --color-little-bear-900: #352b28;
  --color-little-bear-950: #201916;
}

SCSS

$little-bear: #604b42;
$little-bear-rgb: 96, 75, 66;
$little-bear-light: mix(#fff, $little-bear, 20%);
$little-bear-dark: mix(#000, $little-bear, 20%);

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