Downing Sand

CSS

:root {
  --downing-sand: #cbbca5;
  --downing-sand-rgb: 203 188 165;
  --downing-sand-oklch: oklch(0.802 0.036 78.6);
}

.element {
  color: var(--downing-sand);
  background-color: hsl(36 27% 72%);
  border-color: oklch(0.802 0.036 78.6);
}

Tailwind CSS v4

@theme {
  --color-downing-sand: #cbbca5;
  --color-downing-sand-50: #faf4ea;
  --color-downing-sand-100: #eee7db;
  --color-downing-sand-200: #dcd3c4;
  --color-downing-sand-300: #c1b6a3;
  --color-downing-sand-400: #aa9c87;
  --color-downing-sand-500: #93846c;
  --color-downing-sand-600: #7d705b;
  --color-downing-sand-700: #645949;
  --color-downing-sand-800: #4a4135;
  --color-downing-sand-900: #332d24;
  --color-downing-sand-950: #1f1a13;
}

SCSS

$downing-sand: #cbbca5;
$downing-sand-rgb: 203, 188, 165;
$downing-sand-light: mix(#fff, $downing-sand, 20%);
$downing-sand-dark: mix(#000, $downing-sand, 20%);

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