Brown Teepee

CSS

:root {
  --brown-teepee: #bca792;
  --brown-teepee-rgb: 188 167 146;
  --brown-teepee-oklch: oklch(0.741 0.038 67.2);
}

.element {
  color: var(--brown-teepee);
  background-color: hsl(30 24% 65%);
  border-color: oklch(0.741 0.038 67.2);
}

Tailwind CSS v4

@theme {
  --color-brown-teepee: #bca792;
  --color-brown-teepee-50: #fdf3ea;
  --color-brown-teepee-100: #f1e6db;
  --color-brown-teepee-200: #dfd2c3;
  --color-brown-teepee-300: #c5b4a3;
  --color-brown-teepee-400: #ae9b87;
  --color-brown-teepee-500: #98826b;
  --color-brown-teepee-600: #806e5b;
  --color-brown-teepee-700: #675849;
  --color-brown-teepee-800: #4c4035;
  --color-brown-teepee-900: #352c24;
  --color-brown-teepee-950: #201913;
}

SCSS

$brown-teepee: #bca792;
$brown-teepee-rgb: 188, 167, 146;
$brown-teepee-light: mix(#fff, $brown-teepee, 20%);
$brown-teepee-dark: mix(#000, $brown-teepee, 20%);

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