Primitive

CSS

:root {
  --primitive: #685e4e;
  --primitive-rgb: 104 94 78;
  --primitive-oklch: oklch(0.487 0.028 79.5);
}

.element {
  color: var(--primitive);
  background-color: hsl(37 14% 36%);
  border-color: oklch(0.487 0.028 79.5);
}

Tailwind CSS v4

@theme {
  --color-primitive: #685e4e;
  --color-primitive-50: #f9f4ec;
  --color-primitive-100: #ede7de;
  --color-primitive-200: #dad3c7;
  --color-primitive-300: #bfb6a8;
  --color-primitive-400: #a79d8c;
  --color-primitive-500: #908472;
  --color-primitive-600: #7a7061;
  --color-primitive-700: #625a4d;
  --color-primitive-800: #484138;
  --color-primitive-900: #322d26;
  --color-primitive-950: #1e1a15;
}

SCSS

$primitive: #685e4e;
$primitive-rgb: 104, 94, 78;
$primitive-light: mix(#fff, $primitive, 20%);
$primitive-dark: mix(#000, $primitive, 20%);

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