Brevity Brown

CSS

:root {
  --brevity-brown: #715243;
  --brevity-brown-rgb: 113 82 67;
  --brevity-brown-oklch: oklch(0.467 0.048 46.9);
}

.element {
  color: var(--brevity-brown);
  background-color: hsl(20 26% 35%);
  border-color: oklch(0.467 0.048 46.9);
}

Tailwind CSS v4

@theme {
  --color-brevity-brown: #715243;
  --color-brevity-brown-50: #fff1e9;
  --color-brevity-brown-100: #f6e4da;
  --color-brevity-brown-200: #e6cfc3;
  --color-brevity-brown-300: #cdb1a2;
  --color-brevity-brown-400: #b79687;
  --color-brevity-brown-500: #a27d6b;
  --color-brevity-brown-600: #896a5b;
  --color-brevity-brown-700: #6d5449;
  --color-brevity-brown-800: #513d35;
  --color-brevity-brown-900: #382a24;
  --color-brevity-brown-950: #231813;
}

SCSS

$brevity-brown: #715243;
$brevity-brown-rgb: 113, 82, 67;
$brevity-brown-light: mix(#fff, $brevity-brown, 20%);
$brevity-brown-dark: mix(#000, $brevity-brown, 20%);

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