Sōdenkaracha Brown

CSS

:root {
  --sodenkaracha-brown: #9b533f;
  --sodenkaracha-brown-rgb: 155 83 63;
  --sodenkaracha-brown-oklch: oklch(0.524 0.101 36.4);
}

.element {
  color: var(--sodenkaracha-brown);
  background-color: hsl(13 42% 43%);
  border-color: oklch(0.524 0.101 36.4);
}

Tailwind CSS v4

@theme {
  --color-sodenkaracha-brown: #9b533f;
  --color-sodenkaracha-brown-50: #ffece1;
  --color-sodenkaracha-brown-100: #ffddd0;
  --color-sodenkaracha-brown-200: #fcc6b5;
  --color-sodenkaracha-brown-300: #e5a692;
  --color-sodenkaracha-brown-400: #d38974;
  --color-sodenkaracha-brown-500: #bf6c55;
  --color-sodenkaracha-brown-600: #a15c49;
  --color-sodenkaracha-brown-700: #82493a;
  --color-sodenkaracha-brown-800: #60352a;
  --color-sodenkaracha-brown-900: #44241c;
  --color-sodenkaracha-brown-950: #2b130d;
}

SCSS

$sodenkaracha-brown: #9b533f;
$sodenkaracha-brown-rgb: 155, 83, 63;
$sodenkaracha-brown-light: mix(#fff, $sodenkaracha-brown, 20%);
$sodenkaracha-brown-dark: mix(#000, $sodenkaracha-brown, 20%);

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