Brown Ridge

CSS

:root {
  --brown-ridge: #735852;
  --brown-ridge-rgb: 115 88 82;
  --brown-ridge-oklch: oklch(0.486 0.037 32.8);
}

.element {
  color: var(--brown-ridge);
  background-color: hsl(11 17% 39%);
  border-color: oklch(0.486 0.037 32.8);
}

Tailwind CSS v4

@theme {
  --color-brown-ridge: #735852;
  --color-brown-ridge-50: #fff2ee;
  --color-brown-ridge-100: #f4e4e0;
  --color-brown-ridge-200: #e4cfca;
  --color-brown-ridge-300: #cab1ab;
  --color-brown-ridge-400: #b39791;
  --color-brown-ridge-500: #9d7e77;
  --color-brown-ridge-600: #856a64;
  --color-brown-ridge-700: #6b5550;
  --color-brown-ridge-800: #4f3e3b;
  --color-brown-ridge-900: #372a28;
  --color-brown-ridge-950: #211816;
}

SCSS

$brown-ridge: #735852;
$brown-ridge-rgb: 115, 88, 82;
$brown-ridge-light: mix(#fff, $brown-ridge, 20%);
$brown-ridge-dark: mix(#000, $brown-ridge, 20%);

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