Dark Rainforest

CSS

:root {
  --dark-rainforest: #505838;
  --dark-rainforest-rgb: 80 88 56;
  --dark-rainforest-oklch: oklch(0.444 0.05 119.9);
}

.element {
  color: var(--dark-rainforest);
  background-color: hsl(75 22% 28%);
  border-color: oklch(0.444 0.05 119.9);
}

Tailwind CSS v4

@theme {
  --color-dark-rainforest: #505838;
  --color-dark-rainforest-50: #f2f8e8;
  --color-dark-rainforest-100: #e5ebd9;
  --color-dark-rainforest-200: #d0d8c1;
  --color-dark-rainforest-300: #b3bca0;
  --color-dark-rainforest-400: #9aa382;
  --color-dark-rainforest-500: #828b66;
  --color-dark-rainforest-600: #6e7656;
  --color-dark-rainforest-700: #585e45;
  --color-dark-rainforest-800: #414531;
  --color-dark-rainforest-900: #2d3021;
  --color-dark-rainforest-950: #1a1c11;
}

SCSS

$dark-rainforest: #505838;
$dark-rainforest-rgb: 80, 88, 56;
$dark-rainforest-light: mix(#fff, $dark-rainforest, 20%);
$dark-rainforest-dark: mix(#000, $dark-rainforest, 20%);

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