Fruit Salad

CSS

:root {
  --fruit-salad: #4ba351;
  --fruit-salad-rgb: 75 163 81;
  --fruit-salad-oklch: oklch(0.642 0.145 144.9);
}

.element {
  color: var(--fruit-salad);
  background-color: hsl(124 37% 47%);
  border-color: oklch(0.642 0.145 144.9);
}

Tailwind CSS v4

@theme {
  --color-fruit-salad: #4ba351;
  --color-fruit-salad-50: #dbffdd;
  --color-fruit-salad-100: #c9f6cc;
  --color-fruit-salad-200: #abe6b0;
  --color-fruit-salad-300: #84cc8b;
  --color-fruit-salad-400: #62b566;
  --color-fruit-salad-500: #399e43;
  --color-fruit-salad-600: #328639;
  --color-fruit-salad-700: #286b2e;
  --color-fruit-salad-800: #1f4f1d;
  --color-fruit-salad-900: #143713;
  --color-fruit-salad-950: #052105;
}

SCSS

$fruit-salad: #4ba351;
$fruit-salad-rgb: 75, 163, 81;
$fruit-salad-light: mix(#fff, $fruit-salad, 20%);
$fruit-salad-dark: mix(#000, $fruit-salad, 20%);

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