Nordic Grass Green

CSS

:root {
  --nordic-grass-green: #1fab58;
  --nordic-grass-green-rgb: 31 171 88;
  --nordic-grass-green-oklch: oklch(0.652 0.166 151.2);
}

.element {
  color: var(--nordic-grass-green);
  background-color: hsl(144 69% 40%);
  border-color: oklch(0.652 0.166 151.2);
}

Tailwind CSS v4

@theme {
  --color-nordic-grass-green: #1fab58;
  --color-nordic-grass-green-50: #d2ffdf;
  --color-nordic-grass-green-100: #bef9ce;
  --color-nordic-grass-green-200: #9ce9b3;
  --color-nordic-grass-green-300: #6dd08f;
  --color-nordic-grass-green-400: #41b96a;
  --color-nordic-grass-green-500: #00a347;
  --color-nordic-grass-green-600: #008a3d;
  --color-nordic-grass-green-700: #006e31;
  --color-nordic-grass-green-800: #00511f;
  --color-nordic-grass-green-900: #013914;
  --color-nordic-grass-green-950: #002306;
}

SCSS

$nordic-grass-green: #1fab58;
$nordic-grass-green-rgb: 31, 171, 88;
$nordic-grass-green-light: mix(#fff, $nordic-grass-green, 20%);
$nordic-grass-green-dark: mix(#000, $nordic-grass-green, 20%);

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