Biogenic Sand

CSS

:root {
  --biogenic-sand: #ffefd5;
  --biogenic-sand-rgb: 255 239 213;
  --biogenic-sand-oklch: oklch(0.958 0.038 80);
}

.element {
  color: var(--biogenic-sand);
  background-color: hsl(37 100% 92%);
  border-color: oklch(0.958 0.038 80);
}

Tailwind CSS v4

@theme {
  --color-biogenic-sand: #ffefd5;
  --color-biogenic-sand-50: #fbf4e9;
  --color-biogenic-sand-100: #eee7da;
  --color-biogenic-sand-200: #dcd3c2;
  --color-biogenic-sand-300: #c1b6a2;
  --color-biogenic-sand-400: #aa9c85;
  --color-biogenic-sand-500: #94846a;
  --color-biogenic-sand-600: #7d705a;
  --color-biogenic-sand-700: #645948;
  --color-biogenic-sand-800: #4a4134;
  --color-biogenic-sand-900: #332d23;
  --color-biogenic-sand-950: #1f1a12;
}

SCSS

$biogenic-sand: #ffefd5;
$biogenic-sand-rgb: 255, 239, 213;
$biogenic-sand-light: mix(#fff, $biogenic-sand, 20%);
$biogenic-sand-dark: mix(#000, $biogenic-sand, 20%);

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