Nuclear Meltdown

CSS

:root {
  --nuclear-meltdown: #44ee00;
  --nuclear-meltdown-rgb: 68 238 0;
  --nuclear-meltdown-oklch: oklch(0.83 0.27 140.5);
}

.element {
  color: var(--nuclear-meltdown);
  background-color: hsl(103 100% 47%);
  border-color: oklch(0.83 0.27 140.5);
}

Tailwind CSS v4

@theme {
  --color-nuclear-meltdown: #44ee00;
  --color-nuclear-meltdown-50: #c8ffc2;
  --color-nuclear-meltdown-100: #b2ffab;
  --color-nuclear-meltdown-200: #8af183;
  --color-nuclear-meltdown-300: #51d84b;
  --color-nuclear-meltdown-400: #00c100;
  --color-nuclear-meltdown-500: #00aa00;
  --color-nuclear-meltdown-600: #009000;
  --color-nuclear-meltdown-700: #007400;
  --color-nuclear-meltdown-800: #005500;
  --color-nuclear-meltdown-900: #003b00;
  --color-nuclear-meltdown-950: #002500;
}

SCSS

$nuclear-meltdown: #44ee00;
$nuclear-meltdown-rgb: 68, 238, 0;
$nuclear-meltdown-light: mix(#fff, $nuclear-meltdown, 20%);
$nuclear-meltdown-dark: mix(#000, $nuclear-meltdown, 20%);

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