Brick Dust

CSS

:root {
  --brick-dust: #ab685f;
  --brick-dust-rgb: 171 104 95;
  --brick-dust-oklch: oklch(0.589 0.088 28.2);
}

.element {
  color: var(--brick-dust);
  background-color: hsl(7 31% 52%);
  border-color: oklch(0.589 0.088 28.2);
}

Tailwind CSS v4

@theme {
  --color-brick-dust: #ab685f;
  --color-brick-dust-50: #ffede6;
  --color-brick-dust-100: #ffded7;
  --color-brick-dust-200: #f8c7be;
  --color-brick-dust-300: #e1a79d;
  --color-brick-dust-400: #cd8b81;
  --color-brick-dust-500: #b96f65;
  --color-brick-dust-600: #9d5e56;
  --color-brick-dust-700: #7e4b44;
  --color-brick-dust-800: #5d3632;
  --color-brick-dust-900: #412522;
  --color-brick-dust-950: #2a1311;
}

SCSS

$brick-dust: #ab685f;
$brick-dust-rgb: 171, 104, 95;
$brick-dust-light: mix(#fff, $brick-dust, 20%);
$brick-dust-dark: mix(#000, $brick-dust, 20%);

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