New Brick

CSS

:root {
  --new-brick: #934c3d;
  --new-brick-rgb: 147 76 61;
  --new-brick-oklch: oklch(0.5 0.099 33.1);
}

.element {
  color: var(--new-brick);
  background-color: hsl(10 41% 41%);
  border-color: oklch(0.5 0.099 33.1);
}

Tailwind CSS v4

@theme {
  --color-new-brick: #934c3d;
  --color-new-brick-50: #ffece2;
  --color-new-brick-100: #ffddd2;
  --color-new-brick-200: #fbc6b8;
  --color-new-brick-300: #e5a695;
  --color-new-brick-400: #d28978;
  --color-new-brick-500: #be6c5a;
  --color-new-brick-600: #a15c4d;
  --color-new-brick-700: #81493d;
  --color-new-brick-800: #60352d;
  --color-new-brick-900: #43241e;
  --color-new-brick-950: #2b120e;
}

SCSS

$new-brick: #934c3d;
$new-brick-rgb: 147, 76, 61;
$new-brick-light: mix(#fff, $new-brick, 20%);
$new-brick-dark: mix(#000, $new-brick, 20%);

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