Cuban Sand

CSS

:root {
  --cuban-sand: #bc9b83;
  --cuban-sand-rgb: 188 155 131;
  --cuban-sand-oklch: oklch(0.713 0.052 57.8);
}

.element {
  color: var(--cuban-sand);
  background-color: hsl(25 30% 63%);
  border-color: oklch(0.713 0.052 57.8);
}

Tailwind CSS v4

@theme {
  --color-cuban-sand: #bc9b83;
  --color-cuban-sand-50: #fff2e7;
  --color-cuban-sand-100: #f6e4d7;
  --color-cuban-sand-200: #e6d0bf;
  --color-cuban-sand-300: #ccb29d;
  --color-cuban-sand-400: #b79781;
  --color-cuban-sand-500: #a17e64;
  --color-cuban-sand-600: #886b55;
  --color-cuban-sand-700: #6d5544;
  --color-cuban-sand-800: #513e31;
  --color-cuban-sand-900: #382b21;
  --color-cuban-sand-950: #231811;
}

SCSS

$cuban-sand: #bc9b83;
$cuban-sand-rgb: 188, 155, 131;
$cuban-sand-light: mix(#fff, $cuban-sand, 20%);
$cuban-sand-dark: mix(#000, $cuban-sand, 20%);

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