Dark Emerald

CSS

:root {
  --dark-emerald: #00834e;
  --dark-emerald-rgb: 0 131 78;
  --dark-emerald-oklch: oklch(0.537 0.128 156.8);
}

.element {
  color: var(--dark-emerald);
  background-color: hsl(156 100% 26%);
  border-color: oklch(0.537 0.128 156.8);
}

Tailwind CSS v4

@theme {
  --color-dark-emerald: #00834e;
  --color-dark-emerald-50: #d7ffe8;
  --color-dark-emerald-100: #c4f6d8;
  --color-dark-emerald-200: #a5e6c0;
  --color-dark-emerald-300: #7bcc9f;
  --color-dark-emerald-400: #54b57f;
  --color-dark-emerald-500: #1b9f62;
  --color-dark-emerald-600: #1c8654;
  --color-dark-emerald-700: #176b43;
  --color-dark-emerald-800: #124f2e;
  --color-dark-emerald-900: #0c371f;
  --color-dark-emerald-950: #00220f;
}

SCSS

$dark-emerald: #00834e;
$dark-emerald-rgb: 0, 131, 78;
$dark-emerald-light: mix(#fff, $dark-emerald, 20%);
$dark-emerald-dark: mix(#000, $dark-emerald, 20%);

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