Rokou Brown

CSS

:root {
  --rokou-brown: #8c7042;
  --rokou-brown-rgb: 140 112 66;
  --rokou-brown-oklch: oklch(0.562 0.072 78.9);
}

.element {
  color: var(--rokou-brown);
  background-color: hsl(37 36% 40%);
  border-color: oklch(0.562 0.072 78.9);
}

Tailwind CSS v4

@theme {
  --color-rokou-brown: #8c7042;
  --color-rokou-brown-50: #fff4de;
  --color-rokou-brown-100: #f5e6cd;
  --color-rokou-brown-200: #e4d2b2;
  --color-rokou-brown-300: #cbb48e;
  --color-rokou-brown-400: #b69a6d;
  --color-rokou-brown-500: #a0814d;
  --color-rokou-brown-600: #876d42;
  --color-rokou-brown-700: #6c5734;
  --color-rokou-brown-800: #513f25;
  --color-rokou-brown-900: #382b18;
  --color-rokou-brown-950: #231909;
}

SCSS

$rokou-brown: #8c7042;
$rokou-brown-rgb: 140, 112, 66;
$rokou-brown-light: mix(#fff, $rokou-brown, 20%);
$rokou-brown-dark: mix(#000, $rokou-brown, 20%);

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