Tenacious Tentacles

CSS

:root {
  --tenacious-tentacles: #98f6b0;
  --tenacious-tentacles-rgb: 152 246 176;
  --tenacious-tentacles-oklch: oklch(0.897 0.132 151.2);
}

.element {
  color: var(--tenacious-tentacles);
  background-color: hsl(135 84% 78%);
  border-color: oklch(0.897 0.132 151.2);
}

Tailwind CSS v4

@theme {
  --color-tenacious-tentacles: #98f6b0;
  --color-tenacious-tentacles-50: #daffe4;
  --color-tenacious-tentacles-100: #c7f5d3;
  --color-tenacious-tentacles-200: #a9e5ba;
  --color-tenacious-tentacles-300: #80cb97;
  --color-tenacious-tentacles-400: #5db476;
  --color-tenacious-tentacles-500: #2f9e57;
  --color-tenacious-tentacles-600: #2a864a;
  --color-tenacious-tentacles-700: #226b3b;
  --color-tenacious-tentacles-800: #1a4f28;
  --color-tenacious-tentacles-900: #11371b;
  --color-tenacious-tentacles-950: #03210b;
}

SCSS

$tenacious-tentacles: #98f6b0;
$tenacious-tentacles-rgb: 152, 246, 176;
$tenacious-tentacles-light: mix(#fff, $tenacious-tentacles, 20%);
$tenacious-tentacles-dark: mix(#000, $tenacious-tentacles, 20%);

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