Money Banks

CSS

:root {
  --money-banks: #aabe49;
  --money-banks-rgb: 170 190 73;
  --money-banks-oklch: oklch(0.763 0.143 118.1);
}

.element {
  color: var(--money-banks);
  background-color: hsl(70 47% 52%);
  border-color: oklch(0.763 0.143 118.1);
}

Tailwind CSS v4

@theme {
  --color-money-banks: #aabe49;
  --color-money-banks-50: #effcce;
  --color-money-banks-100: #e1f0ba;
  --color-money-banks-200: #ccde98;
  --color-money-banks-300: #aec26c;
  --color-money-banks-400: #97a93b;
  --color-money-banks-500: #7e9200;
  --color-money-banks-600: #6b7b00;
  --color-money-banks-700: #556300;
  --color-money-banks-800: #404800;
  --color-money-banks-900: #2c3200;
  --color-money-banks-950: #191d00;
}

SCSS

$money-banks: #aabe49;
$money-banks-rgb: 170, 190, 73;
$money-banks-light: mix(#fff, $money-banks, 20%);
$money-banks-dark: mix(#000, $money-banks, 20%);

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