Twig Basket

CSS

:root {
  --twig-basket: #77623a;
  --twig-basket-rgb: 119 98 58;
  --twig-basket-oklch: oklch(0.507 0.063 82.6);
}

.element {
  color: var(--twig-basket);
  background-color: hsl(39 34% 35%);
  border-color: oklch(0.507 0.063 82.6);
}

Tailwind CSS v4

@theme {
  --color-twig-basket: #77623a;
  --color-twig-basket-50: #fef4e1;
  --color-twig-basket-100: #f2e7d1;
  --color-twig-basket-200: #e1d3b6;
  --color-twig-basket-300: #c6b593;
  --color-twig-basket-400: #b19b74;
  --color-twig-basket-500: #9b8355;
  --color-twig-basket-600: #836f49;
  --color-twig-basket-700: #69583a;
  --color-twig-basket-800: #4e4029;
  --color-twig-basket-900: #362c1b;
  --color-twig-basket-950: #21190c;
}

SCSS

$twig-basket: #77623a;
$twig-basket-rgb: 119, 98, 58;
$twig-basket-light: mix(#fff, $twig-basket, 20%);
$twig-basket-dark: mix(#000, $twig-basket, 20%);

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