Onion

CSS

:root {
  --onion: #48412b;
  --onion-rgb: 72 65 43;
  --onion-oklch: oklch(0.376 0.036 92.5);
}

.element {
  color: var(--onion);
  background-color: hsl(46 25% 23%);
  border-color: oklch(0.376 0.036 92.5);
}

Tailwind CSS v4

@theme {
  --color-onion: #48412b;
  --color-onion-50: #f8f5ea;
  --color-onion-100: #ebe8db;
  --color-onion-200: #d9d4c3;
  --color-onion-300: #bdb8a3;
  --color-onion-400: #a69e87;
  --color-onion-500: #8e866b;
  --color-onion-600: #78715b;
  --color-onion-700: #605b49;
  --color-onion-800: #474234;
  --color-onion-900: #312e24;
  --color-onion-950: #1d1a12;
}

SCSS

$onion: #48412b;
$onion-rgb: 72, 65, 43;
$onion-light: mix(#fff, $onion, 20%);
$onion-dark: mix(#000, $onion, 20%);

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