Deathclaw Brown

CSS

:root {
  --deathclaw-brown: #b36853;
  --deathclaw-brown-rgb: 179 104 83;
  --deathclaw-brown-oklch: oklch(0.596 0.102 36.5);
}

.element {
  color: var(--deathclaw-brown);
  background-color: hsl(13 39% 51%);
  border-color: oklch(0.596 0.102 36.5);
}

Tailwind CSS v4

@theme {
  --color-deathclaw-brown: #b36853;
  --color-deathclaw-brown-50: #ffece0;
  --color-deathclaw-brown-100: #ffddd0;
  --color-deathclaw-brown-200: #fcc6b5;
  --color-deathclaw-brown-300: #e6a691;
  --color-deathclaw-brown-400: #d38974;
  --color-deathclaw-brown-500: #bf6c55;
  --color-deathclaw-brown-600: #a25c48;
  --color-deathclaw-brown-700: #824939;
  --color-deathclaw-brown-800: #61352a;
  --color-deathclaw-brown-900: #44241c;
  --color-deathclaw-brown-950: #2c120c;
}

SCSS

$deathclaw-brown: #b36853;
$deathclaw-brown-rgb: 179, 104, 83;
$deathclaw-brown-light: mix(#fff, $deathclaw-brown, 20%);
$deathclaw-brown-dark: mix(#000, $deathclaw-brown, 20%);

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