Elk

CSS

:root {
  --elk: #a58d72;
  --elk-rgb: 165 141 114;
  --elk-oklch: oklch(0.658 0.048 70.1);
}

.element {
  color: var(--elk);
  background-color: hsl(32 22% 55%);
  border-color: oklch(0.658 0.048 70.1);
}

Tailwind CSS v4

@theme {
  --color-elk: #a58d72;
  --color-elk-50: #fef3e7;
  --color-elk-100: #f2e6d7;
  --color-elk-200: #e1d1be;
  --color-elk-300: #c7b49d;
  --color-elk-400: #b19a80;
  --color-elk-500: #9b8164;
  --color-elk-600: #836d55;
  --color-elk-700: #695743;
  --color-elk-800: #4e3f31;
  --color-elk-900: #362c21;
  --color-elk-950: #211910;
}

SCSS

$elk: #a58d72;
$elk-rgb: 165, 141, 114;
$elk-light: mix(#fff, $elk, 20%);
$elk-dark: mix(#000, $elk, 20%);

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