Maze

CSS

:root {
  --maze: #5c5638;
  --maze-rgb: 92 86 56;
  --maze-oklch: oklch(0.451 0.046 98.2);
}

.element {
  color: var(--maze);
  background-color: hsl(50 24% 29%);
  border-color: oklch(0.451 0.046 98.2);
}

Tailwind CSS v4

@theme {
  --color-maze: #5c5638;
  --color-maze-50: #f8f6e7;
  --color-maze-100: #ebe9d7;
  --color-maze-200: #d8d5bf;
  --color-maze-300: #bcb89e;
  --color-maze-400: #a59f80;
  --color-maze-500: #8e8764;
  --color-maze-600: #787255;
  --color-maze-700: #605b44;
  --color-maze-800: #474330;
  --color-maze-900: #312e21;
  --color-maze-950: #1d1b10;
}

SCSS

$maze: #5c5638;
$maze-rgb: 92, 86, 56;
$maze-light: mix(#fff, $maze, 20%);
$maze-dark: mix(#000, $maze, 20%);

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