Solution

CSS

:root {
  --solution: #77abab;
  --solution-rgb: 119 171 171;
  --solution-oklch: oklch(0.705 0.055 196);
}

.element {
  color: var(--solution);
  background-color: hsl(180 24% 57%);
  border-color: oklch(0.705 0.055 196);
}

Tailwind CSS v4

@theme {
  --color-solution: #77abab;
  --color-solution-50: #e4fafb;
  --color-solution-100: #d4eeee;
  --color-solution-200: #badcdd;
  --color-solution-300: #97c1c1;
  --color-solution-400: #78a9a9;
  --color-solution-500: #589292;
  --color-solution-600: #4b7b7b;
  --color-solution-700: #3c6363;
  --color-solution-800: #2b4848;
  --color-solution-900: #1d3232;
  --color-solution-950: #0d1e1e;
}

SCSS

$solution: #77abab;
$solution-rgb: 119, 171, 171;
$solution-light: mix(#fff, $solution, 20%);
$solution-dark: mix(#000, $solution, 20%);

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