Tamarind Fruit

CSS

:root {
  --tamarind-fruit: #75503b;
  --tamarind-fruit-rgb: 117 80 59;
  --tamarind-fruit-oklch: oklch(0.466 0.059 50.4);
}

.element {
  color: var(--tamarind-fruit);
  background-color: hsl(22 33% 35%);
  border-color: oklch(0.466 0.059 50.4);
}

Tailwind CSS v4

@theme {
  --color-tamarind-fruit: #75503b;
  --color-tamarind-fruit-50: #fff1e6;
  --color-tamarind-fruit-100: #f9e3d6;
  --color-tamarind-fruit-200: #eacebd;
  --color-tamarind-fruit-300: #d1b09c;
  --color-tamarind-fruit-400: #bc957f;
  --color-tamarind-fruit-500: #a77b62;
  --color-tamarind-fruit-600: #8d6854;
  --color-tamarind-fruit-700: #715343;
  --color-tamarind-fruit-800: #543c30;
  --color-tamarind-fruit-900: #3a2921;
  --color-tamarind-fruit-950: #241710;
}

SCSS

$tamarind-fruit: #75503b;
$tamarind-fruit-rgb: 117, 80, 59;
$tamarind-fruit-light: mix(#fff, $tamarind-fruit, 20%);
$tamarind-fruit-dark: mix(#000, $tamarind-fruit, 20%);

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