Sand Crystal

CSS

:root {
  --sand-crystal: #ffeeda;
  --sand-crystal-rgb: 255 238 218;
  --sand-crystal-oklch: oklch(0.957 0.032 71.9);
}

.element {
  color: var(--sand-crystal);
  background-color: hsl(32 100% 93%);
  border-color: oklch(0.957 0.032 71.9);
}

Tailwind CSS v4

@theme {
  --color-sand-crystal: #ffeeda;
  --color-sand-crystal-50: #fbf4eb;
  --color-sand-crystal-100: #efe7dc;
  --color-sand-crystal-200: #ddd2c6;
  --color-sand-crystal-300: #c2b5a6;
  --color-sand-crystal-400: #ab9c8a;
  --color-sand-crystal-500: #94836f;
  --color-sand-crystal-600: #7d6f5e;
  --color-sand-crystal-700: #64594b;
  --color-sand-crystal-800: #4a4136;
  --color-sand-crystal-900: #332d25;
  --color-sand-crystal-950: #1f1a14;
}

SCSS

$sand-crystal: #ffeeda;
$sand-crystal-rgb: 255, 238, 218;
$sand-crystal-light: mix(#fff, $sand-crystal, 20%);
$sand-crystal-dark: mix(#000, $sand-crystal, 20%);

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