Brickwork Red

CSS

:root {
  --brickwork-red: #986971;
  --brickwork-red-rgb: 152 105 113;
  --brickwork-red-oklch: oklch(0.572 0.061 8);
}

.element {
  color: var(--brickwork-red);
  background-color: hsl(350 19% 50%);
  border-color: oklch(0.572 0.061 8);
}

Tailwind CSS v4

@theme {
  --color-brickwork-red: #986971;
  --color-brickwork-red-50: #ffeef1;
  --color-brickwork-red-100: #fce0e3;
  --color-brickwork-red-200: #edcace;
  --color-brickwork-red-300: #d5abb0;
  --color-brickwork-red-400: #bf9097;
  --color-brickwork-red-500: #aa757e;
  --color-brickwork-red-600: #90636b;
  --color-brickwork-red-700: #734f55;
  --color-brickwork-red-800: #553a3f;
  --color-brickwork-red-900: #3b272b;
  --color-brickwork-red-950: #251519;
}

SCSS

$brickwork-red: #986971;
$brickwork-red-rgb: 152, 105, 113;
$brickwork-red-light: mix(#fff, $brickwork-red, 20%);
$brickwork-red-dark: mix(#000, $brickwork-red, 20%);

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