Aloe Leaf

CSS

:root {
  --aloe-leaf: #61643f;
  --aloe-leaf-rgb: 97 100 63;
  --aloe-leaf-oklch: oklch(0.491 0.055 112.2);
}

.element {
  color: var(--aloe-leaf);
  background-color: hsl(65 23% 32%);
  border-color: oklch(0.491 0.055 112.2);
}

Tailwind CSS v4

@theme {
  --color-aloe-leaf: #61643f;
  --color-aloe-leaf-50: #f4f7e6;
  --color-aloe-leaf-100: #e7ead6;
  --color-aloe-leaf-200: #d3d7bd;
  --color-aloe-leaf-300: #b6bb9b;
  --color-aloe-leaf-400: #9fa27d;
  --color-aloe-leaf-500: #878a60;
  --color-aloe-leaf-600: #727551;
  --color-aloe-leaf-700: #5b5e41;
  --color-aloe-leaf-800: #43442e;
  --color-aloe-leaf-900: #2e2f1f;
  --color-aloe-leaf-950: #1b1c0f;
}

SCSS

$aloe-leaf: #61643f;
$aloe-leaf-rgb: 97, 100, 63;
$aloe-leaf-light: mix(#fff, $aloe-leaf, 20%);
$aloe-leaf-dark: mix(#000, $aloe-leaf, 20%);

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