Florence Brown

CSS

:root {
  --florence-brown: #835740;
  --florence-brown-rgb: 131 87 64;
  --florence-brown-oklch: oklch(0.499 0.068 48.3);
}

.element {
  color: var(--florence-brown);
  background-color: hsl(21 34% 38%);
  border-color: oklch(0.499 0.068 48.3);
}

Tailwind CSS v4

@theme {
  --color-florence-brown: #835740;
  --color-florence-brown-50: #fff0e4;
  --color-florence-brown-100: #fce2d4;
  --color-florence-brown-200: #edcdbb;
  --color-florence-brown-300: #d5ae99;
  --color-florence-brown-400: #c1937b;
  --color-florence-brown-500: #ac795e;
  --color-florence-brown-600: #916650;
  --color-florence-brown-700: #745240;
  --color-florence-brown-800: #563b2e;
  --color-florence-brown-900: #3c291f;
  --color-florence-brown-950: #26160f;
}

SCSS

$florence-brown: #835740;
$florence-brown-rgb: 131, 87, 64;
$florence-brown-light: mix(#fff, $florence-brown, 20%);
$florence-brown-dark: mix(#000, $florence-brown, 20%);

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