Makin It Rain

CSS

:root {
  --makin-it-rain: #88bb55;
  --makin-it-rain-rgb: 136 187 85;
  --makin-it-rain-oklch: oklch(0.734 0.144 131.2);
}

.element {
  color: var(--makin-it-rain);
  background-color: hsl(90 43% 53%);
  border-color: oklch(0.734 0.144 131.2);
}

Tailwind CSS v4

@theme {
  --color-makin-it-rain: #88bb55;
  --color-makin-it-rain-50: #e5ffd5;
  --color-makin-it-rain-100: #d5f3c2;
  --color-makin-it-rain-200: #bce2a3;
  --color-makin-it-rain-300: #9ac77a;
  --color-makin-it-rain-400: #80af50;
  --color-makin-it-rain-500: #63981d;
  --color-makin-it-rain-600: #54811c;
  --color-makin-it-rain-700: #436717;
  --color-makin-it-rain-800: #324b0a;
  --color-makin-it-rain-900: #223407;
  --color-makin-it-rain-950: #112000;
}

SCSS

$makin-it-rain: #88bb55;
$makin-it-rain-rgb: 136, 187, 85;
$makin-it-rain-light: mix(#fff, $makin-it-rain, 20%);
$makin-it-rain-dark: mix(#000, $makin-it-rain, 20%);

.element {
  color: $makin-it-rain;
  box-shadow: 0 0 0 2px rgba($makin-it-rain, 0.35);
}