Distant Valley

CSS

:root {
  --distant-valley: #c2b79a;
  --distant-valley-rgb: 194 183 154;
  --distant-valley-oklch: oklch(0.781 0.042 89.7);
}

.element {
  color: var(--distant-valley);
  background-color: hsl(44 25% 68%);
  border-color: oklch(0.781 0.042 89.7);
}

Tailwind CSS v4

@theme {
  --color-distant-valley: #c2b79a;
  --color-distant-valley-50: #f9f5e8;
  --color-distant-valley-100: #ede8d9;
  --color-distant-valley-200: #dad4c1;
  --color-distant-valley-300: #bfb7a0;
  --color-distant-valley-400: #a89e83;
  --color-distant-valley-500: #918567;
  --color-distant-valley-600: #7b7157;
  --color-distant-valley-700: #625a46;
  --color-distant-valley-800: #484232;
  --color-distant-valley-900: #322d22;
  --color-distant-valley-950: #1e1a11;
}

SCSS

$distant-valley: #c2b79a;
$distant-valley-rgb: 194, 183, 154;
$distant-valley-light: mix(#fff, $distant-valley, 20%);
$distant-valley-dark: mix(#000, $distant-valley, 20%);

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