Half-Caff

CSS

:root {
  --half-caff: #604c3d;
  --half-caff-rgb: 96 76 61;
  --half-caff-oklch: oklch(0.433 0.036 58.5);
}

.element {
  color: var(--half-caff);
  background-color: hsl(26 22% 31%);
  border-color: oklch(0.433 0.036 58.5);
}

Tailwind CSS v4

@theme {
  --color-half-caff: #604c3d;
  --color-half-caff-50: #fdf3eb;
  --color-half-caff-100: #f1e5dc;
  --color-half-caff-200: #e0d1c5;
  --color-half-caff-300: #c6b4a5;
  --color-half-caff-400: #af9a8a;
  --color-half-caff-500: #99816f;
  --color-half-caff-600: #816d5e;
  --color-half-caff-700: #68574b;
  --color-half-caff-800: #4c3f36;
  --color-half-caff-900: #352c25;
  --color-half-caff-950: #201914;
}

SCSS

$half-caff: #604c3d;
$half-caff-rgb: 96, 76, 61;
$half-caff-light: mix(#fff, $half-caff, 20%);
$half-caff-dark: mix(#000, $half-caff, 20%);

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