Beasty Brown

CSS

:root {
  --beasty-brown: #663300;
  --beasty-brown-rgb: 102 51 0;
  --beasty-brown-oklch: oklch(0.38 0.092 56.8);
}

.element {
  color: var(--beasty-brown);
  background-color: hsl(30 100% 20%);
  border-color: oklch(0.38 0.092 56.8);
}

Tailwind CSS v4

@theme {
  --color-beasty-brown: #663300;
  --color-beasty-brown-50: #ffefdc;
  --color-beasty-brown-100: #ffe1ca;
  --color-beasty-brown-200: #f3cbae;
  --color-beasty-brown-300: #dcac88;
  --color-beasty-brown-400: #c89068;
  --color-beasty-brown-500: #b47546;
  --color-beasty-brown-600: #98643c;
  --color-beasty-brown-700: #7a502f;
  --color-beasty-brown-800: #5b3922;
  --color-beasty-brown-900: #402716;
  --color-beasty-brown-950: #281508;
}

SCSS

$beasty-brown: #663300;
$beasty-brown-rgb: 102, 51, 0;
$beasty-brown-light: mix(#fff, $beasty-brown, 20%);
$beasty-brown-dark: mix(#000, $beasty-brown, 20%);

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