My Chai

CSS

:root {
  --my-chai: #d3b395;
  --my-chai-rgb: 211 179 149;
  --my-chai-oklch: oklch(0.787 0.055 65);
}

.element {
  color: var(--my-chai);
  background-color: hsl(29 41% 71%);
  border-color: oklch(0.787 0.055 65);
}

Tailwind CSS v4

@theme {
  --color-my-chai: #d3b395;
  --color-my-chai-50: #fff3e5;
  --color-my-chai-100: #f5e5d5;
  --color-my-chai-200: #e5d0bc;
  --color-my-chai-300: #cbb39a;
  --color-my-chai-400: #b6987c;
  --color-my-chai-500: #a07f5f;
  --color-my-chai-600: #876c51;
  --color-my-chai-700: #6c5641;
  --color-my-chai-800: #503e2e;
  --color-my-chai-900: #382b1f;
  --color-my-chai-950: #22180f;
}

SCSS

$my-chai: #d3b395;
$my-chai-rgb: 211, 179, 149;
$my-chai-light: mix(#fff, $my-chai, 20%);
$my-chai-dark: mix(#000, $my-chai, 20%);

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