Elm

CSS

:root {
  --elm: #297b76;
  --elm-rgb: 41 123 118;
  --elm-oklch: oklch(0.533 0.078 189.3);
}

.element {
  color: var(--elm);
  background-color: hsl(176 50% 32%);
  border-color: oklch(0.533 0.078 189.3);
}

Tailwind CSS v4

@theme {
  --color-elm: #297b76;
  --color-elm-50: #ddfdfb;
  --color-elm-100: #cbf1ee;
  --color-elm-200: #afdfdc;
  --color-elm-300: #88c5c1;
  --color-elm-400: #64aea8;
  --color-elm-500: #3c9791;
  --color-elm-600: #357f7b;
  --color-elm-700: #2a6662;
  --color-elm-800: #1d4b47;
  --color-elm-900: #133431;
  --color-elm-950: #051f1d;
}

SCSS

$elm: #297b76;
$elm-rgb: 41, 123, 118;
$elm-light: mix(#fff, $elm, 20%);
$elm-dark: mix(#000, $elm, 20%);

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