Tainan Brick

CSS

:root {
  --tainan-brick: #b54a4a;
  --tainan-brick-rgb: 181 74 74;
  --tainan-brick-oklch: oklch(0.551 0.14 22.8);
}

.element {
  color: var(--tainan-brick);
  background-color: hsl(0 42% 50%);
  border-color: oklch(0.551 0.14 22.8);
}

Tailwind CSS v4

@theme {
  --color-tainan-brick: #b54a4a;
  --color-tainan-brick-50: #ffe7e1;
  --color-tainan-brick-100: #ffd7d1;
  --color-tainan-brick-200: #ffbdb6;
  --color-tainan-brick-300: #f79b93;
  --color-tainan-brick-400: #e57a77;
  --color-tainan-brick-500: #d35a59;
  --color-tainan-brick-600: #b24d4c;
  --color-tainan-brick-700: #8f3d3c;
  --color-tainan-brick-800: #6a2b2d;
  --color-tainan-brick-900: #4b1d1e;
  --color-tainan-brick-950: #310d0e;
}

SCSS

$tainan-brick: #b54a4a;
$tainan-brick-rgb: 181, 74, 74;
$tainan-brick-light: mix(#fff, $tainan-brick, 20%);
$tainan-brick-dark: mix(#000, $tainan-brick, 20%);

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