Seafoam Green

CSS

:root {
  --seafoam-green: #99bb88;
  --seafoam-green-rgb: 153 187 136;
  --seafoam-green-oklch: oklch(0.754 0.08 135.4);
}

.element {
  color: var(--seafoam-green);
  background-color: hsl(100 27% 63%);
  border-color: oklch(0.754 0.08 135.4);
}

Tailwind CSS v4

@theme {
  --color-seafoam-green: #99bb88;
  --color-seafoam-green-50: #ebfbe5;
  --color-seafoam-green-100: #dcefd5;
  --color-seafoam-green-200: #c4ddbc;
  --color-seafoam-green-300: #a4c29a;
  --color-seafoam-green-400: #8aaa7a;
  --color-seafoam-green-500: #6f925c;
  --color-seafoam-green-600: #5e7c4e;
  --color-seafoam-green-700: #4b633e;
  --color-seafoam-green-800: #37482b;
  --color-seafoam-green-900: #26321d;
  --color-seafoam-green-950: #141e0d;
}

SCSS

$seafoam-green: #99bb88;
$seafoam-green-rgb: 153, 187, 136;
$seafoam-green-light: mix(#fff, $seafoam-green, 20%);
$seafoam-green-dark: mix(#000, $seafoam-green, 20%);

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