Shell Brown

CSS

:root {
  --shell-brown: #56564b;
  --shell-brown-rgb: 86 86 75;
  --shell-brown-oklch: oklch(0.45 0.017 107.1);
}

.element {
  color: var(--shell-brown);
  background-color: hsl(60 7% 32%);
  border-color: oklch(0.45 0.017 107.1);
}

Tailwind CSS v4

@theme {
  --color-shell-brown: #56564b;
  --color-shell-brown-50: #f5f6f0;
  --color-shell-brown-100: #e8e8e2;
  --color-shell-brown-200: #d4d5cd;
  --color-shell-brown-300: #b8b8ae;
  --color-shell-brown-400: #9f9f94;
  --color-shell-brown-500: #87877a;
  --color-shell-brown-600: #727267;
  --color-shell-brown-700: #5b5b53;
  --color-shell-brown-800: #43433c;
  --color-shell-brown-900: #2e2e29;
  --color-shell-brown-950: #1b1b17;
}

SCSS

$shell-brown: #56564b;
$shell-brown-rgb: 86, 86, 75;
$shell-brown-light: mix(#fff, $shell-brown, 20%);
$shell-brown-dark: mix(#000, $shell-brown, 20%);

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