Lime Popsicle

CSS

:root {
  --lime-popsicle: #c1db3b;
  --lime-popsicle-rgb: 193 219 59;
  --lime-popsicle-oklch: oklch(0.844 0.178 118.6);
}

.element {
  color: var(--lime-popsicle);
  background-color: hsl(70 69% 55%);
  border-color: oklch(0.844 0.178 118.6);
}

Tailwind CSS v4

@theme {
  --color-lime-popsicle: #c1db3b;
  --color-lime-popsicle-50: #eefec4;
  --color-lime-popsicle-100: #dff2ae;
  --color-lime-popsicle-200: #c9e087;
  --color-lime-popsicle-300: #abc553;
  --color-lime-popsicle-400: #95ab00;
  --color-lime-popsicle-500: #7c9300;
  --color-lime-popsicle-600: #697d00;
  --color-lime-popsicle-700: #546400;
  --color-lime-popsicle-800: #404900;
  --color-lime-popsicle-900: #2c3200;
  --color-lime-popsicle-950: #191e00;
}

SCSS

$lime-popsicle: #c1db3b;
$lime-popsicle-rgb: 193, 219, 59;
$lime-popsicle-light: mix(#fff, $lime-popsicle, 20%);
$lime-popsicle-dark: mix(#000, $lime-popsicle, 20%);

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