Pastel Sand

CSS

:root {
  --pastel-sand: #d5c6b4;
  --pastel-sand-rgb: 213 198 180;
  --pastel-sand-oklch: oklch(0.834 0.03 72.4);
}

.element {
  color: var(--pastel-sand);
  background-color: hsl(33 28% 77%);
  border-color: oklch(0.834 0.03 72.4);
}

Tailwind CSS v4

@theme {
  --color-pastel-sand: #d5c6b4;
  --color-pastel-sand-50: #faf4ec;
  --color-pastel-sand-100: #eee7dd;
  --color-pastel-sand-200: #dcd3c7;
  --color-pastel-sand-300: #c1b6a7;
  --color-pastel-sand-400: #aa9c8c;
  --color-pastel-sand-500: #938371;
  --color-pastel-sand-600: #7c6f60;
  --color-pastel-sand-700: #63594c;
  --color-pastel-sand-800: #494137;
  --color-pastel-sand-900: #332d26;
  --color-pastel-sand-950: #1e1a14;
}

SCSS

$pastel-sand: #d5c6b4;
$pastel-sand-rgb: 213, 198, 180;
$pastel-sand-light: mix(#fff, $pastel-sand, 20%);
$pastel-sand-dark: mix(#000, $pastel-sand, 20%);

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