Dancing Dogs

CSS

:root {
  --dancing-dogs: #6e493d;
  --dancing-dogs-rgb: 110 73 61;
  --dancing-dogs-oklch: oklch(0.444 0.055 38.7);
}

.element {
  color: var(--dancing-dogs);
  background-color: hsl(15 29% 34%);
  border-color: oklch(0.444 0.055 38.7);
}

Tailwind CSS v4

@theme {
  --color-dancing-dogs: #6e493d;
  --color-dancing-dogs-50: #fff0e9;
  --color-dancing-dogs-100: #f9e2da;
  --color-dancing-dogs-200: #eacdc3;
  --color-dancing-dogs-300: #d1afa2;
  --color-dancing-dogs-400: #bc9487;
  --color-dancing-dogs-500: #a77a6c;
  --color-dancing-dogs-600: #8d675b;
  --color-dancing-dogs-700: #715349;
  --color-dancing-dogs-800: #533c35;
  --color-dancing-dogs-900: #3a2924;
  --color-dancing-dogs-950: #241713;
}

SCSS

$dancing-dogs: #6e493d;
$dancing-dogs-rgb: 110, 73, 61;
$dancing-dogs-light: mix(#fff, $dancing-dogs, 20%);
$dancing-dogs-dark: mix(#000, $dancing-dogs, 20%);

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