Basket of Bobbins

CSS

:root {
  --basket-of-bobbins: #c8c0b8;
  --basket-of-bobbins-rgb: 200 192 184;
  --basket-of-bobbins-oklch: oklch(0.812 0.014 67.6);
}

.element {
  color: var(--basket-of-bobbins);
  background-color: hsl(30 13% 75%);
  border-color: oklch(0.812 0.014 67.6);
}

Tailwind CSS v4

@theme {
  --color-basket-of-bobbins: #c8c0b8;
  --color-basket-of-bobbins-50: #f8f4f1;
  --color-basket-of-bobbins-100: #ebe7e3;
  --color-basket-of-bobbins-200: #d8d3ce;
  --color-basket-of-bobbins-300: #bcb6b0;
  --color-basket-of-bobbins-400: #a49d96;
  --color-basket-of-bobbins-500: #8d857c;
  --color-basket-of-bobbins-600: #777069;
  --color-basket-of-bobbins-700: #5f5a54;
  --color-basket-of-bobbins-800: #46413d;
  --color-basket-of-bobbins-900: #302d2a;
  --color-basket-of-bobbins-950: #1d1a18;
}

SCSS

$basket-of-bobbins: #c8c0b8;
$basket-of-bobbins-rgb: 200, 192, 184;
$basket-of-bobbins-light: mix(#fff, $basket-of-bobbins, 20%);
$basket-of-bobbins-dark: mix(#000, $basket-of-bobbins, 20%);

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