Pixelated Grass

CSS

:root {
  --pixelated-grass: #009337;
  --pixelated-grass-rgb: 0 147 55;
  --pixelated-grass-oklch: oklch(0.578 0.169 147.6);
}

.element {
  color: var(--pixelated-grass);
  background-color: hsl(142 100% 29%);
  border-color: oklch(0.578 0.169 147.6);
}

Tailwind CSS v4

@theme {
  --color-pixelated-grass: #009337;
  --color-pixelated-grass-50: #d4ffdc;
  --color-pixelated-grass-100: #c0f8ca;
  --color-pixelated-grass-200: #9fe9ad;
  --color-pixelated-grass-300: #73cf88;
  --color-pixelated-grass-400: #4bb961;
  --color-pixelated-grass-500: #00a23b;
  --color-pixelated-grass-600: #018933;
  --color-pixelated-grass-700: #056e28;
  --color-pixelated-grass-800: #0b5118;
  --color-pixelated-grass-900: #073810;
  --color-pixelated-grass-950: #002303;
}

SCSS

$pixelated-grass: #009337;
$pixelated-grass-rgb: 0, 147, 55;
$pixelated-grass-light: mix(#fff, $pixelated-grass, 20%);
$pixelated-grass-dark: mix(#000, $pixelated-grass, 20%);

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