Old Brick

CSS

:root {
  --old-brick: #8a3335;
  --old-brick-rgb: 138 51 53;
  --old-brick-oklch: oklch(0.446 0.119 21.9);
}

.element {
  color: var(--old-brick);
  background-color: hsl(359 46% 37%);
  border-color: oklch(0.446 0.119 21.9);
}

Tailwind CSS v4

@theme {
  --color-old-brick: #8a3335;
  --color-old-brick-50: #ffe9e5;
  --color-old-brick-100: #ffd9d5;
  --color-old-brick-200: #ffc1bc;
  --color-old-brick-300: #ee9f9a;
  --color-old-brick-400: #dc817e;
  --color-old-brick-500: #c96262;
  --color-old-brick-600: #aa5453;
  --color-old-brick-700: #884342;
  --color-old-brick-800: #653031;
  --color-old-brick-900: #472021;
  --color-old-brick-950: #2e0f11;
}

SCSS

$old-brick: #8a3335;
$old-brick-rgb: 138, 51, 53;
$old-brick-light: mix(#fff, $old-brick, 20%);
$old-brick-dark: mix(#000, $old-brick, 20%);

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