Free Speech Green

CSS

:root {
  --free-speech-green: #09f911;
  --free-speech-green-rgb: 9 249 17;
  --free-speech-green-oklch: oklch(0.852 0.287 142.6);
}

.element {
  color: var(--free-speech-green);
  background-color: hsl(122 95% 51%);
  border-color: oklch(0.852 0.287 142.6);
}

Tailwind CSS v4

@theme {
  --color-free-speech-green: #09f911;
  --color-free-speech-green-50: #c1ffc2;
  --color-free-speech-green-100: #a9ffab;
  --color-free-speech-green-200: #7df382;
  --color-free-speech-green-300: #33db49;
  --color-free-speech-green-400: #00c400;
  --color-free-speech-green-500: #00ad00;
  --color-free-speech-green-600: #009300;
  --color-free-speech-green-700: #007600;
  --color-free-speech-green-800: #005600;
  --color-free-speech-green-900: #003c00;
  --color-free-speech-green-950: #002600;
}

SCSS

$free-speech-green: #09f911;
$free-speech-green-rgb: 9, 249, 17;
$free-speech-green-light: mix(#fff, $free-speech-green, 20%);
$free-speech-green-dark: mix(#000, $free-speech-green, 20%);

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