Minotaurus Brown

CSS

:root {
  --minotaurus-brown: #882211;
  --minotaurus-brown-rgb: 136 34 17;
  --minotaurus-brown-oklch: oklch(0.417 0.14 32.1);
}

.element {
  color: var(--minotaurus-brown);
  background-color: hsl(9 78% 30%);
  border-color: oklch(0.417 0.14 32.1);
}

Tailwind CSS v4

@theme {
  --color-minotaurus-brown: #882211;
  --color-minotaurus-brown-50: #ffe8db;
  --color-minotaurus-brown-100: #ffd8c9;
  --color-minotaurus-brown-200: #ffbfad;
  --color-minotaurus-brown-300: #f69d87;
  --color-minotaurus-brown-400: #e57d69;
  --color-minotaurus-brown-500: #d25c47;
  --color-minotaurus-brown-600: #b24f3d;
  --color-minotaurus-brown-700: #8f3f30;
  --color-minotaurus-brown-800: #6b2c24;
  --color-minotaurus-brown-900: #4b1e18;
  --color-minotaurus-brown-950: #310d09;
}

SCSS

$minotaurus-brown: #882211;
$minotaurus-brown-rgb: 136, 34, 17;
$minotaurus-brown-light: mix(#fff, $minotaurus-brown, 20%);
$minotaurus-brown-dark: mix(#000, $minotaurus-brown, 20%);

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