Football Pitch

CSS

:root {
  --football-pitch: #528e39;
  --football-pitch-rgb: 82 142 57;
  --football-pitch-oklch: oklch(0.586 0.134 137.5);
}

.element {
  color: var(--football-pitch);
  background-color: hsl(102 43% 39%);
  border-color: oklch(0.586 0.134 137.5);
}

Tailwind CSS v4

@theme {
  --color-football-pitch: #528e39;
  --color-football-pitch-50: #e2ffdb;
  --color-football-pitch-100: #d1f3c9;
  --color-football-pitch-200: #b7e3ac;
  --color-football-pitch-300: #93c886;
  --color-football-pitch-400: #76b160;
  --color-football-pitch-500: #579a3a;
  --color-football-pitch-600: #4a8232;
  --color-football-pitch-700: #3b6828;
  --color-football-pitch-800: #2c4c19;
  --color-football-pitch-900: #1e3510;
  --color-football-pitch-950: #0e2003;
}

SCSS

$football-pitch: #528e39;
$football-pitch-rgb: 82, 142, 57;
$football-pitch-light: mix(#fff, $football-pitch, 20%);
$football-pitch-dark: mix(#000, $football-pitch, 20%);

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