Garden Cucumber

CSS

:root {
  --garden-cucumber: #506a48;
  --garden-cucumber-rgb: 80 106 72;
  --garden-cucumber-oklch: oklch(0.494 0.061 138.5);
}

.element {
  color: var(--garden-cucumber);
  background-color: hsl(106 19% 35%);
  border-color: oklch(0.494 0.061 138.5);
}

Tailwind CSS v4

@theme {
  --color-garden-cucumber: #506a48;
  --color-garden-cucumber-50: #ecfae9;
  --color-garden-cucumber-100: #ddedda;
  --color-garden-cucumber-200: #c7dbc3;
  --color-garden-cucumber-300: #a7c0a2;
  --color-garden-cucumber-400: #8da885;
  --color-garden-cucumber-500: #729069;
  --color-garden-cucumber-600: #617a59;
  --color-garden-cucumber-700: #4d6247;
  --color-garden-cucumber-800: #394732;
  --color-garden-cucumber-900: #273122;
  --color-garden-cucumber-950: #151d11;
}

SCSS

$garden-cucumber: #506a48;
$garden-cucumber-rgb: 80, 106, 72;
$garden-cucumber-light: mix(#fff, $garden-cucumber, 20%);
$garden-cucumber-dark: mix(#000, $garden-cucumber, 20%);

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