Spanish Galleon

CSS

:root {
  --spanish-galleon: #817863;
  --spanish-galleon-rgb: 129 120 99;
  --spanish-galleon-oklch: oklch(0.575 0.033 87.6);
}

.element {
  color: var(--spanish-galleon);
  background-color: hsl(42 13% 45%);
  border-color: oklch(0.575 0.033 87.6);
}

Tailwind CSS v4

@theme {
  --color-spanish-galleon: #817863;
  --color-spanish-galleon-50: #f9f5eb;
  --color-spanish-galleon-100: #ece8dc;
  --color-spanish-galleon-200: #dad4c5;
  --color-spanish-galleon-300: #beb7a5;
  --color-spanish-galleon-400: #a79e89;
  --color-spanish-galleon-500: #8f856e;
  --color-spanish-galleon-600: #79715d;
  --color-spanish-galleon-700: #615a4a;
  --color-spanish-galleon-800: #474236;
  --color-spanish-galleon-900: #322d25;
  --color-spanish-galleon-950: #1d1a13;
}

SCSS

$spanish-galleon: #817863;
$spanish-galleon-rgb: 129, 120, 99;
$spanish-galleon-light: mix(#fff, $spanish-galleon, 20%);
$spanish-galleon-dark: mix(#000, $spanish-galleon, 20%);

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