Sand Sculpture

CSS

:root {
  --sand-sculpture: #e7d0a6;
  --sand-sculpture-rgb: 231 208 166;
  --sand-sculpture-oklch: oklch(0.866 0.061 82.5);
}

.element {
  color: var(--sand-sculpture);
  background-color: hsl(39 58% 78%);
  border-color: oklch(0.866 0.061 82.5);
}

Tailwind CSS v4

@theme {
  --color-sand-sculpture: #e7d0a6;
  --color-sand-sculpture-50: #fdf4e2;
  --color-sand-sculpture-100: #f1e7d1;
  --color-sand-sculpture-200: #e0d3b7;
  --color-sand-sculpture-300: #c6b594;
  --color-sand-sculpture-400: #b09c75;
  --color-sand-sculpture-500: #9a8357;
  --color-sand-sculpture-600: #826f4a;
  --color-sand-sculpture-700: #68583b;
  --color-sand-sculpture-800: #4d402a;
  --color-sand-sculpture-900: #362c1c;
  --color-sand-sculpture-950: #21190c;
}

SCSS

$sand-sculpture: #e7d0a6;
$sand-sculpture-rgb: 231, 208, 166;
$sand-sculpture-light: mix(#fff, $sand-sculpture, 20%);
$sand-sculpture-dark: mix(#000, $sand-sculpture, 20%);

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