Chopsticks

CSS

:root {
  --chopsticks: #e0d1b8;
  --chopsticks-rgb: 224 209 184;
  --chopsticks-oklch: oklch(0.866 0.037 80.6);
}

.element {
  color: var(--chopsticks);
  background-color: hsl(37 39% 80%);
  border-color: oklch(0.866 0.037 80.6);
}

Tailwind CSS v4

@theme {
  --color-chopsticks: #e0d1b8;
  --color-chopsticks-50: #faf4e9;
  --color-chopsticks-100: #eee7da;
  --color-chopsticks-200: #dcd3c3;
  --color-chopsticks-300: #c1b6a2;
  --color-chopsticks-400: #aa9d86;
  --color-chopsticks-500: #93846a;
  --color-chopsticks-600: #7c705a;
  --color-chopsticks-700: #645948;
  --color-chopsticks-800: #4a4134;
  --color-chopsticks-900: #332d23;
  --color-chopsticks-950: #1f1a12;
}

SCSS

$chopsticks: #e0d1b8;
$chopsticks-rgb: 224, 209, 184;
$chopsticks-light: mix(#fff, $chopsticks, 20%);
$chopsticks-dark: mix(#000, $chopsticks, 20%);

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