Bronze Sand

CSS

:root {
  --bronze-sand: #e6be9c;
  --bronze-sand-rgb: 230 190 156;
  --bronze-sand-oklch: oklch(0.828 0.065 62.1);
}

.element {
  color: var(--bronze-sand);
  background-color: hsl(28 60% 76%);
  border-color: oklch(0.828 0.065 62.1);
}

Tailwind CSS v4

@theme {
  --color-bronze-sand: #e6be9c;
  --color-bronze-sand-50: #fff2e2;
  --color-bronze-sand-100: #f8e4d2;
  --color-bronze-sand-200: #e9cfb8;
  --color-bronze-sand-300: #d0b195;
  --color-bronze-sand-400: #bb9677;
  --color-bronze-sand-500: #a57d59;
  --color-bronze-sand-600: #8c6a4c;
  --color-bronze-sand-700: #70543c;
  --color-bronze-sand-800: #533d2b;
  --color-bronze-sand-900: #3a2a1d;
  --color-bronze-sand-950: #24180d;
}

SCSS

$bronze-sand: #e6be9c;
$bronze-sand-rgb: 230, 190, 156;
$bronze-sand-light: mix(#fff, $bronze-sand, 20%);
$bronze-sand-dark: mix(#000, $bronze-sand, 20%);

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