Bitter Lime and Defeat

CSS

:root {
  --bitter-lime-and-defeat: #31cd31;
  --bitter-lime-and-defeat-rgb: 49 205 49;
  --bitter-lime-and-defeat-oklch: oklch(0.742 0.229 142.8);
}

.element {
  color: var(--bitter-lime-and-defeat);
  background-color: hsl(120 61% 50%);
  border-color: oklch(0.742 0.229 142.8);
}

Tailwind CSS v4

@theme {
  --color-bitter-lime-and-defeat: #31cd31;
  --color-bitter-lime-and-defeat-50: #cdffcd;
  --color-bitter-lime-and-defeat-100: #b8fdb8;
  --color-bitter-lime-and-defeat-200: #93ee95;
  --color-bitter-lime-and-defeat-300: #5fd567;
  --color-bitter-lime-and-defeat-400: #2bbe2b;
  --color-bitter-lime-and-defeat-500: #00a800;
  --color-bitter-lime-and-defeat-600: #008e00;
  --color-bitter-lime-and-defeat-700: #007200;
  --color-bitter-lime-and-defeat-800: #005300;
  --color-bitter-lime-and-defeat-900: #003a00;
  --color-bitter-lime-and-defeat-950: #002400;
}

SCSS

$bitter-lime-and-defeat: #31cd31;
$bitter-lime-and-defeat-rgb: 49, 205, 49;
$bitter-lime-and-defeat-light: mix(#fff, $bitter-lime-and-defeat, 20%);
$bitter-lime-and-defeat-dark: mix(#000, $bitter-lime-and-defeat, 20%);

.element {
  color: $bitter-lime-and-defeat;
  box-shadow: 0 0 0 2px rgba($bitter-lime-and-defeat, 0.35);
}