Star Grass

CSS

:root {
  --star-grass: #75dbc1;
  --star-grass-rgb: 117 219 193;
  --star-grass-oklch: oklch(0.822 0.103 175);
}

.element {
  color: var(--star-grass);
  background-color: hsl(165 59% 66%);
  border-color: oklch(0.822 0.103 175);
}

Tailwind CSS v4

@theme {
  --color-star-grass: #75dbc1;
  --color-star-grass-50: #d7fff4;
  --color-star-grass-100: #c4f4e7;
  --color-star-grass-200: #a5e3d3;
  --color-star-grass-300: #7ac9b6;
  --color-star-grass-400: #52b29b;
  --color-star-grass-500: #129c82;
  --color-star-grass-600: #16846e;
  --color-star-grass-700: #136a58;
  --color-star-grass-800: #0d4e3f;
  --color-star-grass-900: #09362b;
  --color-star-grass-950: #002119;
}

SCSS

$star-grass: #75dbc1;
$star-grass-rgb: 117, 219, 193;
$star-grass-light: mix(#fff, $star-grass, 20%);
$star-grass-dark: mix(#000, $star-grass, 20%);

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