Ebicha Brown

CSS

:root {
  --ebicha-brown: #5e2824;
  --ebicha-brown-rgb: 94 40 36;
  --ebicha-brown-oklch: oklch(0.352 0.08 26.2);
}

.element {
  color: var(--ebicha-brown);
  background-color: hsl(4 45% 25%);
  border-color: oklch(0.352 0.08 26.2);
}

Tailwind CSS v4

@theme {
  --color-ebicha-brown: #5e2824;
  --color-ebicha-brown-50: #ffede8;
  --color-ebicha-brown-100: #ffdfd9;
  --color-ebicha-brown-200: #f5c8c1;
  --color-ebicha-brown-300: #dea8a1;
  --color-ebicha-brown-400: #ca8c86;
  --color-ebicha-brown-500: #b5716a;
  --color-ebicha-brown-600: #99605a;
  --color-ebicha-brown-700: #7b4d48;
  --color-ebicha-brown-800: #5b3735;
  --color-ebicha-brown-900: #402624;
  --color-ebicha-brown-950: #281413;
}

SCSS

$ebicha-brown: #5e2824;
$ebicha-brown-rgb: 94, 40, 36;
$ebicha-brown-light: mix(#fff, $ebicha-brown, 20%);
$ebicha-brown-dark: mix(#000, $ebicha-brown, 20%);

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