Bricky Brick

CSS

:root {
  --bricky-brick: #b33a22;
  --bricky-brick-rgb: 179 58 34;
  --bricky-brick-oklch: oklch(0.521 0.161 33.1);
}

.element {
  color: var(--bricky-brick);
  background-color: hsl(10 68% 42%);
  border-color: oklch(0.521 0.161 33.1);
}

Tailwind CSS v4

@theme {
  --color-bricky-brick: #b33a22;
  --color-bricky-brick-50: #ffe6d6;
  --color-bricky-brick-100: #ffd5c4;
  --color-bricky-brick-200: #ffbca5;
  --color-bricky-brick-300: #fe987e;
  --color-bricky-brick-400: #ee765d;
  --color-bricky-brick-500: #dc5337;
  --color-bricky-brick-600: #ba4730;
  --color-bricky-brick-700: #953926;
  --color-bricky-brick-800: #70281c;
  --color-bricky-brick-900: #4f1b13;
  --color-bricky-brick-950: #340a05;
}

SCSS

$bricky-brick: #b33a22;
$bricky-brick-rgb: 179, 58, 34;
$bricky-brick-light: mix(#fff, $bricky-brick, 20%);
$bricky-brick-dark: mix(#000, $bricky-brick, 20%);

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