Tallarn Sand

CSS

:root {
  --tallarn-sand: #a79b5e;
  --tallarn-sand-rgb: 167 155 94;
  --tallarn-sand-oklch: oklch(0.686 0.082 98.5);
}

.element {
  color: var(--tallarn-sand);
  background-color: hsl(50 29% 51%);
  border-color: oklch(0.686 0.082 98.5);
}

Tailwind CSS v4

@theme {
  --color-tallarn-sand: #a79b5e;
  --color-tallarn-sand-50: #faf6dc;
  --color-tallarn-sand-100: #eee9ca;
  --color-tallarn-sand-200: #dcd6ae;
  --color-tallarn-sand-300: #c0b988;
  --color-tallarn-sand-400: #ab9f66;
  --color-tallarn-sand-500: #948743;
  --color-tallarn-sand-600: #7d7239;
  --color-tallarn-sand-700: #645b2e;
  --color-tallarn-sand-800: #4b421f;
  --color-tallarn-sand-900: #342e14;
  --color-tallarn-sand-950: #1f1a06;
}

SCSS

$tallarn-sand: #a79b5e;
$tallarn-sand-rgb: 167, 155, 94;
$tallarn-sand-light: mix(#fff, $tallarn-sand, 20%);
$tallarn-sand-dark: mix(#000, $tallarn-sand, 20%);

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