Capture

CSS

:root {
  --capture: #2cbaa3;
  --capture-rgb: 44 186 163;
  --capture-oklch: oklch(0.711 0.12 178.9);
}

.element {
  color: var(--capture);
  background-color: hsl(170 62% 45%);
  border-color: oklch(0.711 0.12 178.9);
}

Tailwind CSS v4

@theme {
  --color-capture: #2cbaa3;
  --color-capture-50: #d1fff7;
  --color-capture-100: #bcf6ea;
  --color-capture-200: #99e6d7;
  --color-capture-300: #6accbb;
  --color-capture-400: #34b5a0;
  --color-capture-500: #009f87;
  --color-capture-600: #008773;
  --color-capture-700: #006c5c;
  --color-capture-800: #004f41;
  --color-capture-900: #00372d;
  --color-capture-950: #00221a;
}

SCSS

$capture: #2cbaa3;
$capture-rgb: 44, 186, 163;
$capture-light: mix(#fff, $capture, 20%);
$capture-dark: mix(#000, $capture, 20%);

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