Night Vision

CSS

:root {
  --night-vision: #77bb55;
  --night-vision-rgb: 119 187 85;
  --night-vision-oklch: oklch(0.724 0.153 136.3);
}

.element {
  color: var(--night-vision);
  background-color: hsl(100 43% 53%);
  border-color: oklch(0.724 0.153 136.3);
}

Tailwind CSS v4

@theme {
  --color-night-vision: #77bb55;
  --color-night-vision-50: #e0ffd6;
  --color-night-vision-100: #cff5c3;
  --color-night-vision-200: #b4e4a5;
  --color-night-vision-300: #8fca7d;
  --color-night-vision-400: #72b253;
  --color-night-vision-500: #529c24;
  --color-night-vision-600: #468421;
  --color-night-vision-700: #38691a;
  --color-night-vision-800: #2a4d0d;
  --color-night-vision-900: #1c3608;
  --color-night-vision-950: #0c2100;
}

SCSS

$night-vision: #77bb55;
$night-vision-rgb: 119, 187, 85;
$night-vision-light: mix(#fff, $night-vision, 20%);
$night-vision-dark: mix(#000, $night-vision, 20%);

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