Greek Garden

CSS

:root {
  --greek-garden: #8cce86;
  --greek-garden-rgb: 140 206 134;
  --greek-garden-oklch: oklch(0.789 0.12 142.4);
}

.element {
  color: var(--greek-garden);
  background-color: hsl(115 42% 67%);
  border-color: oklch(0.789 0.12 142.4);
}

Tailwind CSS v4

@theme {
  --color-greek-garden: #8cce86;
  --color-greek-garden-50: #e1ffe0;
  --color-greek-garden-100: #d0f3cf;
  --color-greek-garden-200: #b5e2b4;
  --color-greek-garden-300: #91c891;
  --color-greek-garden-400: #73b06e;
  --color-greek-garden-500: #529a4d;
  --color-greek-garden-600: #468242;
  --color-greek-garden-700: #386834;
  --color-greek-garden-800: #2a4c23;
  --color-greek-garden-900: #1c3517;
  --color-greek-garden-950: #0c2008;
}

SCSS

$greek-garden: #8cce86;
$greek-garden-rgb: 140, 206, 134;
$greek-garden-light: mix(#fff, $greek-garden, 20%);
$greek-garden-dark: mix(#000, $greek-garden, 20%);

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