Wiener Dog

CSS

:root {
  --wiener-dog: #874e3c;
  --wiener-dog-rgb: 135 78 60;
  --wiener-dog-oklch: oklch(0.486 0.082 38.3);
}

.element {
  color: var(--wiener-dog);
  background-color: hsl(14 38% 38%);
  border-color: oklch(0.486 0.082 38.3);
}

Tailwind CSS v4

@theme {
  --color-wiener-dog: #874e3c;
  --color-wiener-dog-50: #ffeee4;
  --color-wiener-dog-100: #ffdfd4;
  --color-wiener-dog-200: #f4c9ba;
  --color-wiener-dog-300: #ddaa98;
  --color-wiener-dog-400: #c98e7b;
  --color-wiener-dog-500: #b5735d;
  --color-wiener-dog-600: #996150;
  --color-wiener-dog-700: #7b4e3f;
  --color-wiener-dog-800: #5b382e;
  --color-wiener-dog-900: #40261f;
  --color-wiener-dog-950: #29140f;
}

SCSS

$wiener-dog: #874e3c;
$wiener-dog-rgb: 135, 78, 60;
$wiener-dog-light: mix(#fff, $wiener-dog, 20%);
$wiener-dog-dark: mix(#000, $wiener-dog, 20%);

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