Leprous Brown

CSS

:root {
  --leprous-brown: #d99631;
  --leprous-brown-rgb: 217 150 49;
  --leprous-brown-oklch: oklch(0.723 0.137 72.7);
}

.element {
  color: var(--leprous-brown);
  background-color: hsl(36 69% 52%);
  border-color: oklch(0.723 0.137 72.7);
}

Tailwind CSS v4

@theme {
  --color-leprous-brown: #d99631;
  --color-leprous-brown-50: #fff0ca;
  --color-leprous-brown-100: #ffe2b6;
  --color-leprous-brown-200: #f7cc92;
  --color-leprous-brown-300: #e1ad63;
  --color-leprous-brown-400: #cf9032;
  --color-leprous-brown-500: #bc7400;
  --color-leprous-brown-600: #9f6200;
  --color-leprous-brown-700: #7f4f00;
  --color-leprous-brown-800: #5f3800;
  --color-leprous-brown-900: #432700;
  --color-leprous-brown-950: #2b1400;
}

SCSS

$leprous-brown: #d99631;
$leprous-brown-rgb: 217, 150, 49;
$leprous-brown-light: mix(#fff, $leprous-brown, 20%);
$leprous-brown-dark: mix(#000, $leprous-brown, 20%);

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