#C5DD72

CSS

:root {
  --cool-as-a-cucumber: #c5dd72;
  --cool-as-a-cucumber-rgb: 197 221 114;
  --cool-as-a-cucumber-oklch: oklch(0.857 0.136 119.8);
}

.element {
  color: var(--cool-as-a-cucumber);
  background-color: hsl(73 61% 66%);
  border-color: oklch(0.857 0.136 119.8);
}

Tailwind CSS v4

@theme {
  --color-cool-as-a-cucumber: #c5dd72;
  --color-cool-as-a-cucumber-50: #eefcd1;
  --color-cool-as-a-cucumber-100: #e0f0bd;
  --color-cool-as-a-cucumber-200: #cade9d;
  --color-cool-as-a-cucumber-300: #acc372;
  --color-cool-as-a-cucumber-400: #95aa45;
  --color-cool-as-a-cucumber-500: #7c9200;
  --color-cool-as-a-cucumber-600: #697c04;
  --color-cool-as-a-cucumber-700: #546306;
  --color-cool-as-a-cucumber-800: #3f4800;
  --color-cool-as-a-cucumber-900: #2b3202;
  --color-cool-as-a-cucumber-950: #191e00;
}

SCSS

$cool-as-a-cucumber: #c5dd72;
$cool-as-a-cucumber-rgb: 197, 221, 114;
$cool-as-a-cucumber-light: mix(#fff, $cool-as-a-cucumber, 20%);
$cool-as-a-cucumber-dark: mix(#000, $cool-as-a-cucumber, 20%);

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