Bitter Lime

CSS

:root {
  --bitter-lime: #cfff00;
  --bitter-lime-rgb: 207 255 0;
  --bitter-lime-oklch: oklch(0.933 0.227 122.4);
}

.element {
  color: var(--bitter-lime);
  background-color: hsl(71 100% 50%);
  border-color: oklch(0.933 0.227 122.4);
}

Tailwind CSS v4

@theme {
  --color-bitter-lime: #cfff00;
  --color-bitter-lime-50: #e7ffb9;
  --color-bitter-lime-100: #d7f5a0;
  --color-bitter-lime-200: #bfe573;
  --color-bitter-lime-300: #9fca2a;
  --color-bitter-lime-400: #88b100;
  --color-bitter-lime-500: #6e9900;
  --color-bitter-lime-600: #5d8100;
  --color-bitter-lime-700: #4a6800;
  --color-bitter-lime-800: #394b00;
  --color-bitter-lime-900: #273400;
  --color-bitter-lime-950: #161f00;
}

SCSS

$bitter-lime: #cfff00;
$bitter-lime-rgb: 207, 255, 0;
$bitter-lime-light: mix(#fff, $bitter-lime, 20%);
$bitter-lime-dark: mix(#000, $bitter-lime, 20%);

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