Jolt of Green

CSS

:root {
  --jolt-of-green: #82c785;
  --jolt-of-green-rgb: 130 199 133;
  --jolt-of-green-oklch: oklch(0.767 0.116 145.3);
}

.element {
  color: var(--jolt-of-green);
  background-color: hsl(123 38% 65%);
  border-color: oklch(0.767 0.116 145.3);
}

Tailwind CSS v4

@theme {
  --color-jolt-of-green: #82c785;
  --color-jolt-of-green-50: #e0ffe2;
  --color-jolt-of-green-100: #cff3d2;
  --color-jolt-of-green-200: #b4e2b8;
  --color-jolt-of-green-300: #8fc895;
  --color-jolt-of-green-400: #70b173;
  --color-jolt-of-green-500: #4e9a54;
  --color-jolt-of-green-600: #438248;
  --color-jolt-of-green-700: #356839;
  --color-jolt-of-green-800: #284c27;
  --color-jolt-of-green-900: #1b351a;
  --color-jolt-of-green-950: #0b200a;
}

SCSS

$jolt-of-green: #82c785;
$jolt-of-green-rgb: 130, 199, 133;
$jolt-of-green-light: mix(#fff, $jolt-of-green, 20%);
$jolt-of-green-dark: mix(#000, $jolt-of-green, 20%);

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