Boston Brown Bread

CSS

:root {
  --boston-brown-bread: #614432;
  --boston-brown-bread-rgb: 97 68 50;
  --boston-brown-bread-oklch: oklch(0.414 0.049 52.7);
}

.element {
  color: var(--boston-brown-bread);
  background-color: hsl(23 32% 29%);
  border-color: oklch(0.414 0.049 52.7);
}

Tailwind CSS v4

@theme {
  --color-boston-brown-bread: #614432;
  --color-boston-brown-bread-50: #fff2e8;
  --color-boston-brown-bread-100: #f6e4d9;
  --color-boston-brown-bread-200: #e6cfc1;
  --color-boston-brown-bread-300: #ccb1a0;
  --color-boston-brown-bread-400: #b79784;
  --color-boston-brown-bread-500: #a17e68;
  --color-boston-brown-bread-600: #886a58;
  --color-boston-brown-bread-700: #6d5546;
  --color-boston-brown-bread-800: #513e33;
  --color-boston-brown-bread-900: #382a23;
  --color-boston-brown-bread-950: #231812;
}

SCSS

$boston-brown-bread: #614432;
$boston-brown-bread-rgb: 97, 68, 50;
$boston-brown-bread-light: mix(#fff, $boston-brown-bread, 20%);
$boston-brown-bread-dark: mix(#000, $boston-brown-bread, 20%);

.element {
  color: $boston-brown-bread;
  box-shadow: 0 0 0 2px rgba($boston-brown-bread, 0.35);
}