Brick Paver

CSS

:root {
  --brick-paver: #93402f;
  --brick-paver-rgb: 147 64 47;
  --brick-paver-oklch: oklch(0.478 0.116 33.2);
}

.element {
  color: var(--brick-paver);
  background-color: hsl(10 52% 38%);
  border-color: oklch(0.478 0.116 33.2);
}

Tailwind CSS v4

@theme {
  --color-brick-paver: #93402f;
  --color-brick-paver-50: #ffeadf;
  --color-brick-paver-100: #ffdbce;
  --color-brick-paver-200: #ffc3b3;
  --color-brick-paver-300: #eca28f;
  --color-brick-paver-400: #da8471;
  --color-brick-paver-500: #c76652;
  --color-brick-paver-600: #a85746;
  --color-brick-paver-700: #874537;
  --color-brick-paver-800: #643129;
  --color-brick-paver-900: #47221b;
  --color-brick-paver-950: #2e110c;
}

SCSS

$brick-paver: #93402f;
$brick-paver-rgb: 147, 64, 47;
$brick-paver-light: mix(#fff, $brick-paver, 20%);
$brick-paver-dark: mix(#000, $brick-paver, 20%);

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