Dark Teal

CSS

:root {
  --dark-teal: #014d4e;
  --dark-teal-rgb: 1 77 78;
  --dark-teal-oklch: oklch(0.381 0.065 196.3);
}

.element {
  color: var(--dark-teal);
  background-color: hsl(181 97% 15%);
  border-color: oklch(0.381 0.065 196.3);
}

Tailwind CSS v4

@theme {
  --color-dark-teal: #014d4e;
  --color-dark-teal-50: #e1fbfc;
  --color-dark-teal-100: #d0eff0;
  --color-dark-teal-200: #b5ddde;
  --color-dark-teal-300: #91c2c3;
  --color-dark-teal-400: #70abab;
  --color-dark-teal-500: #4d9494;
  --color-dark-teal-600: #427d7d;
  --color-dark-teal-700: #356464;
  --color-dark-teal-800: #254949;
  --color-dark-teal-900: #193333;
  --color-dark-teal-950: #091f1e;
}

SCSS

$dark-teal: #014d4e;
$dark-teal-rgb: 1, 77, 78;
$dark-teal-light: mix(#fff, $dark-teal, 20%);
$dark-teal-dark: mix(#000, $dark-teal, 20%);

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