Spring Grass

CSS

:root {
  --spring-grass: #d5cb7f;
  --spring-grass-rgb: 213 203 127;
  --spring-grass-oklch: oklch(0.833 0.097 101.8);
}

.element {
  color: var(--spring-grass);
  background-color: hsl(53 51% 67%);
  border-color: oklch(0.833 0.097 101.8);
}

Tailwind CSS v4

@theme {
  --color-spring-grass: #d5cb7f;
  --color-spring-grass-50: #f9f7d7;
  --color-spring-grass-100: #edeac5;
  --color-spring-grass-200: #dbd7a7;
  --color-spring-grass-300: #bfba7f;
  --color-spring-grass-400: #aaa15a;
  --color-spring-grass-500: #938832;
  --color-spring-grass-600: #7d732c;
  --color-spring-grass-700: #645c23;
  --color-spring-grass-800: #4a4316;
  --color-spring-grass-900: #342e0e;
  --color-spring-grass-950: #1f1b02;
}

SCSS

$spring-grass: #d5cb7f;
$spring-grass-rgb: 213, 203, 127;
$spring-grass-light: mix(#fff, $spring-grass, 20%);
$spring-grass-dark: mix(#000, $spring-grass, 20%);

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