Outerbanks

CSS

:root {
  --outerbanks: #b7a48b;
  --outerbanks-rgb: 183 164 139;
  --outerbanks-oklch: oklch(0.729 0.041 74.6);
}

.element {
  color: var(--outerbanks);
  background-color: hsl(34 23% 63%);
  border-color: oklch(0.729 0.041 74.6);
}

Tailwind CSS v4

@theme {
  --color-outerbanks: #b7a48b;
  --color-outerbanks-50: #fcf4e8;
  --color-outerbanks-100: #f0e6d9;
  --color-outerbanks-200: #dfd2c1;
  --color-outerbanks-300: #c4b5a0;
  --color-outerbanks-400: #ad9b84;
  --color-outerbanks-500: #978368;
  --color-outerbanks-600: #7f6f58;
  --color-outerbanks-700: #665846;
  --color-outerbanks-800: #4b4033;
  --color-outerbanks-900: #342c22;
  --color-outerbanks-950: #201912;
}

SCSS

$outerbanks: #b7a48b;
$outerbanks-rgb: 183, 164, 139;
$outerbanks-light: mix(#fff, $outerbanks, 20%);
$outerbanks-dark: mix(#000, $outerbanks, 20%);

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