Graceland Grass

CSS

:root {
  --graceland-grass: #546c46;
  --graceland-grass-rgb: 84 108 70;
  --graceland-grass-oklch: oklch(0.501 0.065 134.5);
}

.element {
  color: var(--graceland-grass);
  background-color: hsl(98 21% 35%);
  border-color: oklch(0.501 0.065 134.5);
}

Tailwind CSS v4

@theme {
  --color-graceland-grass: #546c46;
  --color-graceland-grass-50: #edfae8;
  --color-graceland-grass-100: #deedd8;
  --color-graceland-grass-200: #c8dbc0;
  --color-graceland-grass-300: #a9c09f;
  --color-graceland-grass-400: #8fa781;
  --color-graceland-grass-500: #749064;
  --color-graceland-grass-600: #627a55;
  --color-graceland-grass-700: #4f6144;
  --color-graceland-grass-800: #3a4730;
  --color-graceland-grass-900: #283120;
  --color-graceland-grass-950: #161d10;
}

SCSS

$graceland-grass: #546c46;
$graceland-grass-rgb: 84, 108, 70;
$graceland-grass-light: mix(#fff, $graceland-grass, 20%);
$graceland-grass-dark: mix(#000, $graceland-grass, 20%);

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