Sliced Cucumber

CSS

:root {
  --sliced-cucumber: #cccfbf;
  --sliced-cucumber-rgb: 204 207 191;
  --sliced-cucumber-oklch: oklch(0.848 0.022 115.5);
}

.element {
  color: var(--sliced-cucumber);
  background-color: hsl(71 14% 78%);
  border-color: oklch(0.848 0.022 115.5);
}

Tailwind CSS v4

@theme {
  --color-sliced-cucumber: #cccfbf;
  --color-sliced-cucumber-50: #f4f6ef;
  --color-sliced-cucumber-100: #e7e9e1;
  --color-sliced-cucumber-200: #d3d6cb;
  --color-sliced-cucumber-300: #b6b9ad;
  --color-sliced-cucumber-400: #9ea092;
  --color-sliced-cucumber-500: #858878;
  --color-sliced-cucumber-600: #717366;
  --color-sliced-cucumber-700: #5a5c51;
  --color-sliced-cucumber-800: #42433b;
  --color-sliced-cucumber-900: #2e2e28;
  --color-sliced-cucumber-950: #1a1b16;
}

SCSS

$sliced-cucumber: #cccfbf;
$sliced-cucumber-rgb: 204, 207, 191;
$sliced-cucumber-light: mix(#fff, $sliced-cucumber, 20%);
$sliced-cucumber-dark: mix(#000, $sliced-cucumber, 20%);

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