Jute Brown

CSS

:root {
  --jute-brown: #815d40;
  --jute-brown-rgb: 129 93 64;
  --jute-brown-oklch: oklch(0.509 0.063 59.6);
}

.element {
  color: var(--jute-brown);
  background-color: hsl(27 34% 38%);
  border-color: oklch(0.509 0.063 59.6);
}

Tailwind CSS v4

@theme {
  --color-jute-brown: #815d40;
  --color-jute-brown-50: #fff2e3;
  --color-jute-brown-100: #f8e4d3;
  --color-jute-brown-200: #e9cfb9;
  --color-jute-brown-300: #d0b197;
  --color-jute-brown-400: #bb9679;
  --color-jute-brown-500: #a67c5b;
  --color-jute-brown-600: #8c694e;
  --color-jute-brown-700: #70543e;
  --color-jute-brown-800: #533d2c;
  --color-jute-brown-900: #3a2a1e;
  --color-jute-brown-950: #24170e;
}

SCSS

$jute-brown: #815d40;
$jute-brown-rgb: 129, 93, 64;
$jute-brown-light: mix(#fff, $jute-brown, 20%);
$jute-brown-dark: mix(#000, $jute-brown, 20%);

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