Cucumber Green

CSS

:root {
  --cucumber-green: #466353;
  --cucumber-green-rgb: 70 99 83;
  --cucumber-green-oklch: oklch(0.472 0.043 160);
}

.element {
  color: var(--cucumber-green);
  background-color: hsl(147 17% 33%);
  border-color: oklch(0.472 0.043 160);
}

Tailwind CSS v4

@theme {
  --color-cucumber-green: #466353;
  --color-cucumber-green-50: #ebf9f1;
  --color-cucumber-green-100: #dcede3;
  --color-cucumber-green-200: #c5dacf;
  --color-cucumber-green-300: #a5bfb1;
  --color-cucumber-green-400: #89a796;
  --color-cucumber-green-500: #6e8f7c;
  --color-cucumber-green-600: #5d7969;
  --color-cucumber-green-700: #4a6154;
  --color-cucumber-green-800: #36473d;
  --color-cucumber-green-900: #25312a;
  --color-cucumber-green-950: #131d17;
}

SCSS

$cucumber-green: #466353;
$cucumber-green-rgb: 70, 99, 83;
$cucumber-green-light: mix(#fff, $cucumber-green, 20%);
$cucumber-green-dark: mix(#000, $cucumber-green, 20%);

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