Almost Aqua

CSS

:root {
  --almost-aqua: #98ddc5;
  --almost-aqua-rgb: 152 221 197;
  --almost-aqua-oklch: oklch(0.845 0.077 170.7);
}

.element {
  color: var(--almost-aqua);
  background-color: hsl(159 50% 73%);
  border-color: oklch(0.845 0.077 170.7);
}

Tailwind CSS v4

@theme {
  --color-almost-aqua: #98ddc5;
  --color-almost-aqua-50: #e0fdf3;
  --color-almost-aqua-100: #cff1e5;
  --color-almost-aqua-200: #b3e0d1;
  --color-almost-aqua-300: #8fc5b3;
  --color-almost-aqua-400: #6eae98;
  --color-almost-aqua-500: #4a977f;
  --color-almost-aqua-600: #40806b;
  --color-almost-aqua-700: #336656;
  --color-almost-aqua-800: #254b3e;
  --color-almost-aqua-900: #18342a;
  --color-almost-aqua-950: #091f18;
}

SCSS

$almost-aqua: #98ddc5;
$almost-aqua-rgb: 152, 221, 197;
$almost-aqua-light: mix(#fff, $almost-aqua, 20%);
$almost-aqua-dark: mix(#000, $almost-aqua, 20%);

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