Garden Gate

CSS

:root {
  --garden-gate: #dadcc1;
  --garden-gate-rgb: 218 220 193;
  --garden-gate-oklch: oklch(0.886 0.036 110.6);
}

.element {
  color: var(--garden-gate);
  background-color: hsl(64 28% 81%);
  border-color: oklch(0.886 0.036 110.6);
}

Tailwind CSS v4

@theme {
  --color-garden-gate: #dadcc1;
  --color-garden-gate-50: #f5f6eb;
  --color-garden-gate-100: #e8e9dc;
  --color-garden-gate-200: #d4d6c5;
  --color-garden-gate-300: #b7baa5;
  --color-garden-gate-400: #9fa188;
  --color-garden-gate-500: #87896d;
  --color-garden-gate-600: #72745d;
  --color-garden-gate-700: #5b5d4a;
  --color-garden-gate-800: #434435;
  --color-garden-gate-900: #2e2f24;
  --color-garden-gate-950: #1b1b13;
}

SCSS

$garden-gate: #dadcc1;
$garden-gate-rgb: 218, 220, 193;
$garden-gate-light: mix(#fff, $garden-gate, 20%);
$garden-gate-dark: mix(#000, $garden-gate, 20%);

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