Banished Brown

CSS

:root {
  --banished-brown: #745e6f;
  --banished-brown-rgb: 116 94 111;
  --banished-brown-oklch: oklch(0.509 0.038 334.2);
}

.element {
  color: var(--banished-brown);
  background-color: hsl(314 10% 41%);
  border-color: oklch(0.509 0.038 334.2);
}

Tailwind CSS v4

@theme {
  --color-banished-brown: #745e6f;
  --color-banished-brown-50: #fdf1f9;
  --color-banished-brown-100: #f1e3ed;
  --color-banished-brown-200: #dfceda;
  --color-banished-brown-300: #c5b0bf;
  --color-banished-brown-400: #ad96a8;
  --color-banished-brown-500: #977d91;
  --color-banished-brown-600: #7f6a7a;
  --color-banished-brown-700: #665562;
  --color-banished-brown-800: #4b3e48;
  --color-banished-brown-900: #342a32;
  --color-banished-brown-950: #1f181e;
}

SCSS

$banished-brown: #745e6f;
$banished-brown-rgb: 116, 94, 111;
$banished-brown-light: mix(#fff, $banished-brown, 20%);
$banished-brown-dark: mix(#000, $banished-brown, 20%);

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