Sand Dollar

CSS

:root {
  --sand-dollar: #dccdbb;
  --sand-dollar-rgb: 220 205 187;
  --sand-dollar-oklch: oklch(0.856 0.03 72.4);
}

.element {
  color: var(--sand-dollar);
  background-color: hsl(33 32% 80%);
  border-color: oklch(0.856 0.03 72.4);
}

Tailwind CSS v4

@theme {
  --color-sand-dollar: #dccdbb;
  --color-sand-dollar-50: #faf4ec;
  --color-sand-dollar-100: #eee7dd;
  --color-sand-dollar-200: #dcd3c7;
  --color-sand-dollar-300: #c1b6a7;
  --color-sand-dollar-400: #aa9c8c;
  --color-sand-dollar-500: #938371;
  --color-sand-dollar-600: #7c6f60;
  --color-sand-dollar-700: #63594c;
  --color-sand-dollar-800: #494137;
  --color-sand-dollar-900: #332d26;
  --color-sand-dollar-950: #1e1a14;
}

SCSS

$sand-dollar: #dccdbb;
$sand-dollar-rgb: 220, 205, 187;
$sand-dollar-light: mix(#fff, $sand-dollar, 20%);
$sand-dollar-dark: mix(#000, $sand-dollar, 20%);

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