Overcast Brick

CSS

:root {
  --overcast-brick: #b3583d;
  --overcast-brick-rgb: 179 88 61;
  --overcast-brick-oklch: oklch(0.566 0.125 37.3);
}

.element {
  color: var(--overcast-brick);
  background-color: hsl(14 49% 47%);
  border-color: oklch(0.566 0.125 37.3);
}

Tailwind CSS v4

@theme {
  --color-overcast-brick: #b3583d;
  --color-overcast-brick-50: #ffeadb;
  --color-overcast-brick-100: #ffdbc9;
  --color-overcast-brick-200: #ffc3ad;
  --color-overcast-brick-300: #efa187;
  --color-overcast-brick-400: #dd8368;
  --color-overcast-brick-500: #cb6446;
  --color-overcast-brick-600: #ab553c;
  --color-overcast-brick-700: #89442f;
  --color-overcast-brick-800: #663023;
  --color-overcast-brick-900: #482117;
  --color-overcast-brick-950: #2f1008;
}

SCSS

$overcast-brick: #b3583d;
$overcast-brick-rgb: 179, 88, 61;
$overcast-brick-light: mix(#fff, $overcast-brick, 20%);
$overcast-brick-dark: mix(#000, $overcast-brick, 20%);

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