Suzumecha Brown

CSS

:root {
  --suzumecha-brown: #8c4736;
  --suzumecha-brown-rgb: 140 71 54;
  --suzumecha-brown-oklch: oklch(0.48 0.098 34.9);
}

.element {
  color: var(--suzumecha-brown);
  background-color: hsl(12 44% 38%);
  border-color: oklch(0.48 0.098 34.9);
}

Tailwind CSS v4

@theme {
  --color-suzumecha-brown: #8c4736;
  --color-suzumecha-brown-50: #ffece2;
  --color-suzumecha-brown-100: #ffddd1;
  --color-suzumecha-brown-200: #fbc6b7;
  --color-suzumecha-brown-300: #e4a694;
  --color-suzumecha-brown-400: #d18977;
  --color-suzumecha-brown-500: #be6d59;
  --color-suzumecha-brown-600: #a05d4c;
  --color-suzumecha-brown-700: #814a3c;
  --color-suzumecha-brown-800: #60352c;
  --color-suzumecha-brown-900: #43241e;
  --color-suzumecha-brown-950: #2b130e;
}

SCSS

$suzumecha-brown: #8c4736;
$suzumecha-brown-rgb: 140, 71, 54;
$suzumecha-brown-light: mix(#fff, $suzumecha-brown, 20%);
$suzumecha-brown-dark: mix(#000, $suzumecha-brown, 20%);

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