Blue Black Crayfish

CSS

:root {
  --blue-black-crayfish: #52593b;
  --blue-black-crayfish-rgb: 82 89 59;
  --blue-black-crayfish-oklch: oklch(0.449 0.047 119);
}

.element {
  color: var(--blue-black-crayfish);
  background-color: hsl(74 20% 29%);
  border-color: oklch(0.449 0.047 119);
}

Tailwind CSS v4

@theme {
  --color-blue-black-crayfish: #52593b;
  --color-blue-black-crayfish-50: #f3f7e9;
  --color-blue-black-crayfish-100: #e5ebd9;
  --color-blue-black-crayfish-200: #d1d8c2;
  --color-blue-black-crayfish-300: #b3bba1;
  --color-blue-black-crayfish-400: #9ba384;
  --color-blue-black-crayfish-500: #828b68;
  --color-blue-black-crayfish-600: #6e7658;
  --color-blue-black-crayfish-700: #585e46;
  --color-blue-black-crayfish-800: #414532;
  --color-blue-black-crayfish-900: #2d2f22;
  --color-blue-black-crayfish-950: #1a1c11;
}

SCSS

$blue-black-crayfish: #52593b;
$blue-black-crayfish-rgb: 82, 89, 59;
$blue-black-crayfish-light: mix(#fff, $blue-black-crayfish, 20%);
$blue-black-crayfish-dark: mix(#000, $blue-black-crayfish, 20%);

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