Mallardish

CSS

:root {
  --mallardish: #3a4531;
  --mallardish-rgb: 58 69 49;
  --mallardish-oklch: oklch(0.374 0.036 131.4);
}

.element {
  color: var(--mallardish);
  background-color: hsl(93 17% 23%);
  border-color: oklch(0.374 0.036 131.4);
}

Tailwind CSS v4

@theme {
  --color-mallardish: #3a4531;
  --color-mallardish-50: #f1f8ed;
  --color-mallardish-100: #e3ebdf;
  --color-mallardish-200: #ced8c8;
  --color-mallardish-300: #b0bca9;
  --color-mallardish-400: #97a38d;
  --color-mallardish-500: #7e8b73;
  --color-mallardish-600: #6a7661;
  --color-mallardish-700: #555e4e;
  --color-mallardish-800: #3e4538;
  --color-mallardish-900: #2b3026;
  --color-mallardish-950: #181c15;
}

SCSS

$mallardish: #3a4531;
$mallardish-rgb: 58, 69, 49;
$mallardish-light: mix(#fff, $mallardish, 20%);
$mallardish-dark: mix(#000, $mallardish, 20%);

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