Out of Left Field

CSS

:root {
  --out-of-left-field: #2ced2b;
  --out-of-left-field-rgb: 44 237 43;
  --out-of-left-field-oklch: oklch(0.824 0.265 142.6);
}

.element {
  color: var(--out-of-left-field);
  background-color: hsl(120 84% 55%);
  border-color: oklch(0.824 0.265 142.6);
}

Tailwind CSS v4

@theme {
  --color-out-of-left-field: #2ced2b;
  --color-out-of-left-field-50: #c6ffc6;
  --color-out-of-left-field-100: #afffb0;
  --color-out-of-left-field-200: #85f189;
  --color-out-of-left-field-300: #47d956;
  --color-out-of-left-field-400: #00c200;
  --color-out-of-left-field-500: #00ab00;
  --color-out-of-left-field-600: #009100;
  --color-out-of-left-field-700: #007400;
  --color-out-of-left-field-800: #005500;
  --color-out-of-left-field-900: #003c00;
  --color-out-of-left-field-950: #002500;
}

SCSS

$out-of-left-field: #2ced2b;
$out-of-left-field-rgb: 44, 237, 43;
$out-of-left-field-light: mix(#fff, $out-of-left-field, 20%);
$out-of-left-field-dark: mix(#000, $out-of-left-field, 20%);

.element {
  color: $out-of-left-field;
  box-shadow: 0 0 0 2px rgba($out-of-left-field, 0.35);
}