Cabbage

CSS

:root {
  --cabbage: #87d7be;
  --cabbage-rgb: 135 215 190;
  --cabbage-oklch: oklch(0.82 0.087 172.2);
}

.element {
  color: var(--cabbage);
  background-color: hsl(161 50% 69%);
  border-color: oklch(0.82 0.087 172.2);
}

Tailwind CSS v4

@theme {
  --color-cabbage: #87d7be;
  --color-cabbage-50: #ddfef3;
  --color-cabbage-100: #cbf2e6;
  --color-cabbage-200: #aee1d1;
  --color-cabbage-300: #88c6b4;
  --color-cabbage-400: #65af99;
  --color-cabbage-500: #3d9980;
  --color-cabbage-600: #35816c;
  --color-cabbage-700: #2a6756;
  --color-cabbage-800: #1e4c3e;
  --color-cabbage-900: #14352b;
  --color-cabbage-950: #052018;
}

SCSS

$cabbage: #87d7be;
$cabbage-rgb: 135, 215, 190;
$cabbage-light: mix(#fff, $cabbage, 20%);
$cabbage-dark: mix(#000, $cabbage, 20%);

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