Mushroom Basket

CSS

:root {
  --mushroom-basket: #977a76;
  --mushroom-basket-rgb: 151 122 118;
  --mushroom-basket-oklch: oklch(0.606 0.037 27.3);
}

.element {
  color: var(--mushroom-basket);
  background-color: hsl(7 14% 53%);
  border-color: oklch(0.606 0.037 27.3);
}

Tailwind CSS v4

@theme {
  --color-mushroom-basket: #977a76;
  --color-mushroom-basket-50: #fff1ef;
  --color-mushroom-basket-100: #f4e4e1;
  --color-mushroom-basket-200: #e4cfcb;
  --color-mushroom-basket-300: #cab1ad;
  --color-mushroom-basket-400: #b39793;
  --color-mushroom-basket-500: #9d7d79;
  --color-mushroom-basket-600: #856a66;
  --color-mushroom-basket-700: #6b5552;
  --color-mushroom-basket-800: #4e3e3c;
  --color-mushroom-basket-900: #372a29;
  --color-mushroom-basket-950: #211817;
}

SCSS

$mushroom-basket: #977a76;
$mushroom-basket-rgb: 151, 122, 118;
$mushroom-basket-light: mix(#fff, $mushroom-basket, 20%);
$mushroom-basket-dark: mix(#000, $mushroom-basket, 20%);

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