Hanover Brick

CSS

:root {
  --hanover-brick: #885d53;
  --hanover-brick-rgb: 136 93 83;
  --hanover-brick-oklch: oklch(0.522 0.059 33.6);
}

.element {
  color: var(--hanover-brick);
  background-color: hsl(11 24% 43%);
  border-color: oklch(0.522 0.059 33.6);
}

Tailwind CSS v4

@theme {
  --color-hanover-brick: #885d53;
  --color-hanover-brick-50: #fff0ea;
  --color-hanover-brick-100: #fbe1db;
  --color-hanover-brick-200: #ecccc3;
  --color-hanover-brick-300: #d4ada3;
  --color-hanover-brick-400: #bf9288;
  --color-hanover-brick-500: #aa786d;
  --color-hanover-brick-600: #8f665c;
  --color-hanover-brick-700: #735149;
  --color-hanover-brick-800: #553b36;
  --color-hanover-brick-900: #3b2825;
  --color-hanover-brick-950: #251613;
}

SCSS

$hanover-brick: #885d53;
$hanover-brick-rgb: 136, 93, 83;
$hanover-brick-light: mix(#fff, $hanover-brick, 20%);
$hanover-brick-dark: mix(#000, $hanover-brick, 20%);

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