In the Tropics

CSS

:root {
  --in-the-tropics: #a3bc3a;
  --in-the-tropics-rgb: 163 188 58;
  --in-the-tropics-oklch: oklch(0.752 0.155 119.7);
}

.element {
  color: var(--in-the-tropics);
  background-color: hsl(72 53% 48%);
  border-color: oklch(0.752 0.155 119.7);
}

Tailwind CSS v4

@theme {
  --color-in-the-tropics: #a3bc3a;
  --color-in-the-tropics-50: #eefdcc;
  --color-in-the-tropics-100: #dff1b7;
  --color-in-the-tropics-200: #c9df94;
  --color-in-the-tropics-300: #aac466;
  --color-in-the-tropics-400: #94ab30;
  --color-in-the-tropics-500: #7b9300;
  --color-in-the-tropics-600: #687c00;
  --color-in-the-tropics-700: #536400;
  --color-in-the-tropics-800: #3e4900;
  --color-in-the-tropics-900: #2b3200;
  --color-in-the-tropics-950: #181e00;
}

SCSS

$in-the-tropics: #a3bc3a;
$in-the-tropics-rgb: 163, 188, 58;
$in-the-tropics-light: mix(#fff, $in-the-tropics, 20%);
$in-the-tropics-dark: mix(#000, $in-the-tropics, 20%);

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