Brick-A-Brack

CSS

:root {
  --brick-a-brack: #a75c3d;
  --brick-a-brack-rgb: 167 92 61;
  --brick-a-brack-oklch: oklch(0.556 0.108 42.7);
}

.element {
  color: var(--brick-a-brack);
  background-color: hsl(18 46% 45%);
  border-color: oklch(0.556 0.108 42.7);
}

Tailwind CSS v4

@theme {
  --color-brick-a-brack: #a75c3d;
  --color-brick-a-brack-50: #ffecdc;
  --color-brick-a-brack-100: #ffddcb;
  --color-brick-a-brack-200: #fdc6af;
  --color-brick-a-brack-300: #e7a68a;
  --color-brick-a-brack-400: #d4896a;
  --color-brick-a-brack-500: #c16c49;
  --color-brick-a-brack-600: #a35c3f;
  --color-brick-a-brack-700: #834932;
  --color-brick-a-brack-800: #613424;
  --color-brick-a-brack-900: #442418;
  --color-brick-a-brack-950: #2c1209;
}

SCSS

$brick-a-brack: #a75c3d;
$brick-a-brack-rgb: 167, 92, 61;
$brick-a-brack-light: mix(#fff, $brick-a-brack, 20%);
$brick-a-brack-dark: mix(#000, $brick-a-brack, 20%);

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