Walk in the Park

CSS

:root {
  --walk-in-the-park: #88bb11;
  --walk-in-the-park-rgb: 136 187 17;
  --walk-in-the-park-oklch: oklch(0.729 0.184 127);
}

.element {
  color: var(--walk-in-the-park);
  background-color: hsl(78 83% 40%);
  border-color: oklch(0.729 0.184 127);
}

Tailwind CSS v4

@theme {
  --color-walk-in-the-park: #88bb11;
  --color-walk-in-the-park-50: #e5ffc8;
  --color-walk-in-the-park-100: #d5f5b3;
  --color-walk-in-the-park-200: #bce48e;
  --color-walk-in-the-park-300: #9ac95d;
  --color-walk-in-the-park-400: #81b115;
  --color-walk-in-the-park-500: #659a00;
  --color-walk-in-the-park-600: #568200;
  --color-walk-in-the-park-700: #446800;
  --color-walk-in-the-park-800: #344c00;
  --color-walk-in-the-park-900: #233500;
  --color-walk-in-the-park-950: #122000;
}

SCSS

$walk-in-the-park: #88bb11;
$walk-in-the-park-rgb: 136, 187, 17;
$walk-in-the-park-light: mix(#fff, $walk-in-the-park, 20%);
$walk-in-the-park-dark: mix(#000, $walk-in-the-park, 20%);

.element {
  color: $walk-in-the-park;
  box-shadow: 0 0 0 2px rgba($walk-in-the-park, 0.35);
}