Camel Brown

CSS

:root {
  --camel-brown: #a56639;
  --camel-brown-rgb: 165 102 57;
  --camel-brown-oklch: oklch(0.57 0.101 54.6);
}

.element {
  color: var(--camel-brown);
  background-color: hsl(25 49% 44%);
  border-color: oklch(0.57 0.101 54.6);
}

Tailwind CSS v4

@theme {
  --color-camel-brown: #a56639;
  --color-camel-brown-50: #ffefda;
  --color-camel-brown-100: #ffe0c8;
  --color-camel-brown-200: #f7caab;
  --color-camel-brown-300: #e0ab85;
  --color-camel-brown-400: #cd8e63;
  --color-camel-brown-500: #b97240;
  --color-camel-brown-600: #9c6137;
  --color-camel-brown-700: #7e4e2c;
  --color-camel-brown-800: #5e381f;
  --color-camel-brown-900: #422614;
  --color-camel-brown-950: #2a1406;
}

SCSS

$camel-brown: #a56639;
$camel-brown-rgb: 165, 102, 57;
$camel-brown-light: mix(#fff, $camel-brown, 20%);
$camel-brown-dark: mix(#000, $camel-brown, 20%);

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