Gossip

CSS

:root {
  --gossip: #9fd385;
  --gossip-rgb: 159 211 133;
  --gossip-oklch: oklch(0.812 0.118 135.7);
}

.element {
  color: var(--gossip);
  background-color: hsl(100 47% 67%);
  border-color: oklch(0.812 0.118 135.7);
}

Tailwind CSS v4

@theme {
  --color-gossip: #9fd385;
  --color-gossip-50: #e5fedd;
  --color-gossip-100: #d5f2cc;
  --color-gossip-200: #bce1b0;
  --color-gossip-300: #9ac68a;
  --color-gossip-400: #7fae66;
  --color-gossip-500: #619743;
  --color-gossip-600: #53803a;
  --color-gossip-700: #42672e;
  --color-gossip-800: #314b1e;
  --color-gossip-900: #213414;
  --color-gossip-950: #111f06;
}

SCSS

$gossip: #9fd385;
$gossip-rgb: 159, 211, 133;
$gossip-light: mix(#fff, $gossip, 20%);
$gossip-dark: mix(#000, $gossip, 20%);

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