Pale Teal

CSS

:root {
  --pale-teal: #82cbb2;
  --pale-teal-rgb: 130 203 178;
  --pale-teal-oklch: oklch(0.787 0.082 170.5);
}

.element {
  color: var(--pale-teal);
  background-color: hsl(159 41% 65%);
  border-color: oklch(0.787 0.082 170.5);
}

Tailwind CSS v4

@theme {
  --color-pale-teal: #82cbb2;
  --color-pale-teal-50: #dffdf3;
  --color-pale-teal-100: #cdf1e5;
  --color-pale-teal-200: #b1e0d0;
  --color-pale-teal-300: #8cc6b3;
  --color-pale-teal-400: #6aae97;
  --color-pale-teal-500: #45987e;
  --color-pale-teal-600: #3c806b;
  --color-pale-teal-700: #306755;
  --color-pale-teal-800: #224c3d;
  --color-pale-teal-900: #17342a;
  --color-pale-teal-950: #072018;
}

SCSS

$pale-teal: #82cbb2;
$pale-teal-rgb: 130, 203, 178;
$pale-teal-light: mix(#fff, $pale-teal, 20%);
$pale-teal-dark: mix(#000, $pale-teal, 20%);

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