Bread Basket

CSS

:root {
  --bread-basket: #ab8659;
  --bread-basket-rgb: 171 134 89;
  --bread-basket-oklch: oklch(0.645 0.076 71.3);
}

.element {
  color: var(--bread-basket);
  background-color: hsl(33 33% 51%);
  border-color: oklch(0.645 0.076 71.3);
}

Tailwind CSS v4

@theme {
  --color-bread-basket: #ab8659;
  --color-bread-basket-50: #fff2de;
  --color-bread-basket-100: #f8e5cd;
  --color-bread-basket-200: #e9d0b1;
  --color-bread-basket-300: #d0b28d;
  --color-bread-basket-400: #bb976c;
  --color-bread-basket-500: #a67e4b;
  --color-bread-basket-600: #8c6a41;
  --color-bread-basket-700: #705533;
  --color-bread-basket-800: #543e24;
  --color-bread-basket-900: #3a2a18;
  --color-bread-basket-950: #241809;
}

SCSS

$bread-basket: #ab8659;
$bread-basket-rgb: 171, 134, 89;
$bread-basket-light: mix(#fff, $bread-basket, 20%);
$bread-basket-dark: mix(#000, $bread-basket, 20%);

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