Mexican Sand Dollar

CSS

:root {
  --mexican-sand-dollar: #dad4c5;
  --mexican-sand-dollar-rgb: 218 212 197;
  --mexican-sand-dollar-oklch: oklch(0.871 0.021 88.7);
}

.element {
  color: var(--mexican-sand-dollar);
  background-color: hsl(43 22% 81%);
  border-color: oklch(0.871 0.021 88.7);
}

Tailwind CSS v4

@theme {
  --color-mexican-sand-dollar: #dad4c5;
  --color-mexican-sand-dollar-50: #f7f5ee;
  --color-mexican-sand-dollar-100: #eae8e0;
  --color-mexican-sand-dollar-200: #d7d4ca;
  --color-mexican-sand-dollar-300: #bbb7ab;
  --color-mexican-sand-dollar-400: #a39e90;
  --color-mexican-sand-dollar-500: #8c8676;
  --color-mexican-sand-dollar-600: #767164;
  --color-mexican-sand-dollar-700: #5f5a50;
  --color-mexican-sand-dollar-800: #46423a;
  --color-mexican-sand-dollar-900: #302e28;
  --color-mexican-sand-dollar-950: #1c1a16;
}

SCSS

$mexican-sand-dollar: #dad4c5;
$mexican-sand-dollar-rgb: 218, 212, 197;
$mexican-sand-dollar-light: mix(#fff, $mexican-sand-dollar, 20%);
$mexican-sand-dollar-dark: mix(#000, $mexican-sand-dollar, 20%);

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