Sand Dance

CSS

:root {
  --sand-dance: #e0c8b9;
  --sand-dance-rgb: 224 200 185;
  --sand-dance-oklch: oklch(0.849 0.034 54.1);
}

.element {
  color: var(--sand-dance);
  background-color: hsl(23 39% 80%);
  border-color: oklch(0.849 0.034 54.1);
}

Tailwind CSS v4

@theme {
  --color-sand-dance: #e0c8b9;
  --color-sand-dance-50: #fdf3ec;
  --color-sand-dance-100: #f1e5dd;
  --color-sand-dance-200: #e0d1c7;
  --color-sand-dance-300: #c6b3a7;
  --color-sand-dance-400: #af9a8c;
  --color-sand-dance-500: #998171;
  --color-sand-dance-600: #816d60;
  --color-sand-dance-700: #67574d;
  --color-sand-dance-800: #4c3f38;
  --color-sand-dance-900: #352c26;
  --color-sand-dance-950: #201914;
}

SCSS

$sand-dance: #e0c8b9;
$sand-dance-rgb: 224, 200, 185;
$sand-dance-light: mix(#fff, $sand-dance, 20%);
$sand-dance-dark: mix(#000, $sand-dance, 20%);

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